以可变速率为自定义 CAShapeLayer 设置动画答案

【问题标题】：Animating a custom CAShapeLayer at a variable rate以可变速率为自定义 CAShapeLayer 设置动画
【发布时间】：2016-05-21 15:54:20
【问题描述】：

我有一系列弧线，都是用这样的代码创建的，并使用 CABasicAnimation @"strokeEnd" 进行动画处理。

        if (!_fourthShapeLayer) {
            _fourthPath =  [UIBezierPath bezierPathWithArcCenter:CGPointMake(rect.size.width / 2, rect.size.height / 2)
                                                         radius:rect.size.width / 2 - 9.5
                                                     startAngle:startAngle
                                                       endAngle:startAngle - (endAngle - startAngle)
                                                      clockwise:YES];
            _fourthShapeLayer = [CAShapeLayer layer];
            _fourthShapeLayer.path = _fourthPath.CGPath;
            _fourthShapeLayer.fillColor = [UIColor clearColor].CGColor;
            _fourthShapeLayer.strokeColor = [UIColor colorWithHue:.33888889 saturation:.62 brightness:0.62 alpha:1.0].CGColor;
            _fourthShapeLayer.lineWidth = 3.0;
            _fourthShapeLayer.rasterizationScale = 2.0 * [UIScreen mainScreen].scale;
            _fourthShapeLayer.shouldRasterize = YES;
        }

        CABasicAnimation *strokeAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        strokeAnimation.fromValue = [NSNumber numberWithFloat:0.0];
        strokeAnimation.toValue = [NSNumber numberWithFloat:1.0];
        strokeAnimation.duration = 1.0;
        strokeAnimation.speed = 1.0;
        [_fourthShapeLayer addAnimation:strokeAnimation forKey:@"stroke"];

        [self.layer addSublayer:_fourthShapeLayer];

不同的是颜色和定义路径时的半径。

我想更改弧动画的速率以执行以下操作：所有动画同时开始和结束，但速率不同。基本上，一些弧线开始快而结束慢，其他弧开始慢而结束快 - 都以不同的速率。

如果我可以像这样定义绘制的弧量，那就太好了： pow((elapsedAnimationTime / totalAnimationTime), 1.05) - 改变不同弧的“功率”（1.05、1.02、.97、.91，例如）。

有人有什么建议吗？最初我设置了一个计时器并调用drawRect：每隔百分之一秒，根据上面提到的'power'函数定义路径端点 - 但当然这是一个成本太高的操作。

帮助表示赞赏！

【问题讨论】：

对了，以后如果做基于timer的方式（对于一些动画来说是最好的方式），最好用CADisplayLink，自动协调屏幕更新。
@Rob 很棒的建议。非常感谢。
虽然使用 CABasicAnimation 和更改 timingFunction 属性（Alex 的回答，见下文）对 CPU 来说是最有效的，但它会导致一些挑剔的行为，包括动画完成时弧线会短暂消失。在这种情况下，CADisplayLink 被证明是一个更好的解决方案，因为它提供了最佳控制而没有奇怪的行为。

标签： ios objective-c animation cashapelayer cabasicanimation

【解决方案1】：

您可以使用自定义timingFunction，例如：

animation.timingFunction = [CAMediaTimingFunction functionWithControlPoints:0.5:0:0.9:0.7];

在此处了解更多信息：Animations Explained

【讨论】：