ios - UIView 动画曲线减速使用 UIViewAnimationOptionCurveEaseOut

Question

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

例如，我有一个要从一端移动到另一端的对象 (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];

Answer 1

您可以通过在 ImageView 的图层属性 (CALayer) 上使用自定义计时函数 (CAMediaTimingFunction) 以及关键帧 (CAKeyframeAnimation) 来完成此操作。

您需要了解的其他重要概念是贝塞尔曲线、值、关键时间和控制点。

您要做的第一件事是配置动画。此示例将快速调高 ImageView ，然后在离开屏幕时减慢速度。

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"];