UIView 动画曲线减速使用 UIViewAnimationOptionCurveEaseOut

Posted 2023-03-13

【中文标题】UIView 动画曲线减速使用 UIViewAnimationOptionCurveEaseOut

【英文标题】：UIView animation curve slowdown using UIViewAnimationOptionCurveEaseOut

【发布时间】：2014-07-13 02:51:50

【问题描述】：

我试图弄清楚如何在动画发生时改变动画的速度。 将不胜感激任何帮助。

例如，我有一个想要从一端移动到另一端的对象（image1）。我已经实现了UIViewAnimationOptionCurveEaseOut 让动画开始快，然后在结束时减速，问题是速度的变化，从快到慢，几乎看不到，有人可以帮我弄清楚如何结束动画的速度比默认的UIViewAnimationOptionCurveEaseOut 慢得多，这是我正在使用的代码示例。

UIImageView *image1 = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"theImage.png"]];

image1.frame = CGRectMake(0, 300, 50, 50);

[UIView animateWithDuration:1.0f
                      delay:0.0f
                    options:  UIViewAnimationOptionCurveEaseOut
                 animations:^(void) 
                     image1.frame = CGRectMake(700, 300, 50, 50);
                 
                 completion:NULL];

【参考方案1】：

您可以通过在图像视图的图层属性 (CALayer) 上使用自定义计时函数 (CAMediaTimingFunction) 以及关键帧 (CAKeyframeAnimation) 来实现此目的的一种方法。 您需要了解的其他重要概念是贝塞尔曲线、值、关键时间和控制点。 您要做的第一件事是配置动画。此示例将快速打开图像视图，然后在离开屏幕时减慢速度。

CAKeyframeAnimation *animation = [CAKeyframeAnimation animationWithKeyPath:@"position.y"];
animation.duration             = 2;
animation.repeatCount          = 0;
animation.removedOnCompletion  = NO;
animation.autoreverses         = NO;
animation.fillMode             = kCAFillModeForwards;

NSMutableArray *values = [[NSMutableArray alloc] init];
NSMutableArray *timings = [[NSMutableArray alloc] init];
NSMutableArray *keytimes = [[NSMutableArray alloc] init];

现在这是棘手的部分。这三个数组稍后将被添加到动画中，共同形成速度曲线！进入 values 的第一个值将表示开始位置。请记住，CALayers 是从 1 到 1 的网格系统。所以我想将我的 imageView 放在中心线的顶部。

[values addObject:[NSNumber numberWithFloat:self.imageView.center.y]];

时间是最难理解的部分。它与贝塞尔曲线中的控制点有关。您可以进入 Photoshop 获得准确的分数或 http://ciechanowski.me/blog/2014/02/18/drawing-bezier-curves/ 估计分数。但我发现这些要点有助于更好地缓解...

[timings addObject:[CAMediaTimingFunction functionWithControlPoints:0.1 :0.34 :0.0 :0.0]];
[keytimes addObject:[NSNumber numberWithFloat:0]];

这是目标位置。 （你想要 n-1 个计时函数。N 是值或关键时间的数量。应该有 n 个值和关键时间）。我只是在某个地方选择了屏幕外

[values addObject:[NSNumber numberWithFloat:-self.view.bounds.size.height]];
[keytimes addObject:[NSNumber numberWithFloat:2]];

animation.values = values;
animation.timingFunctions = timings;
animation.keyTimes = keytimes;

[self.imageView.layer addAnimation:animation forKey@"Animate"];