[翻译] AnimatedPath 动画路径（持续更新）

AnimatedPath
动画路径

感谢原作者分享精神，有空补上使用教程

https://github.com/twotoasters/AnimatedPath

AnimatedPath explores using the CAMediaTiming protocol to interactively control the drawing of a path.
AnimatedPath  尝试使用 CAMediaTiming 协议来控制绘制一条路径。

Basic usage
基本使用方法

Step 1: Draw a Path
第一步：绘制一条路径

• Tap around the screen to add points to a path.  点击屏幕来给路径添加点
• Drag existing points to move them.                    拖动存在的点
• Tap and hold existing points to remove them.    长按着一个点来删除这个点

Step 2: Animate
第二步：动画

• The path is rendered using a CAShapeLayer with speed == 0.
• The layer has an animation for its strokeEnd key path with a fromValue of 0 and a toValue of 1.
• Since the layer's speed == 0, adjusting the layer's timeOffset controls the time at which the animation is rendered.
• The slider at the top of the screen adjusts the layer's timeOffset.
• 使用 CAShapeLayer 来渲染路径，设置 speed = 0
• 这个 layer 用 strokeEnd 作为关键帧路径，其值从 0 到 1 变化
• 当 layer 的 speed 为0时，操作 layer 的 timeOffset 来控制时间，动画就是通过这个来渲染的
• 屏幕上方的 slider 控制器操作着 layer 的 timeOffset

Getting the Setup Right
如何正确的设置

The most difficult part of putting this example together was understanding how to add the animation to the layer and still be able to control the animation's progress via the timeOffset. Here's what worked:
最难的部分就是怎么把动画加进 layer 中去，而且，还能够控通过 timeOffset 来控制动画的百分比进度，以下代码描述了怎么运作的：

CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:NSStringFromSelector(@selector(strokeEnd))];

animation.fromValue = @0.0;

animation.toValue = @1.0;

animation.removedOnCompletion = NO;

animation.duration = kDuration;

 

[self.pathBuilderView.pathShapeView.shapeLayer addAnimation:animation forKey:NSStringFromSelector(@selector(strokeEnd))];

self.pathBuilderView.pathShapeView.shapeLayer.speed = 0;

self.pathBuilderView.pathShapeView.shapeLayer.timeOffset = 0.0;

[CATransaction flush];

self.pathBuilderView.pathShapeView.shapeLayer.timeOffset = kInitialTimeOffset;

The end result of this approach is that the animation has a beginTime of 0 and the shape layer renders it at time kInitialTimeOffset.

结果呢，就是动画有一个 beginTime，从 0 开始，然后，shapelayer 就根据 kInitialTimeOffset 来渲染。

The [CATransaction flush] is required because it forces the system to give the animation added to the layer a beginTime. The animation's beginTime is calculated by adding its initial value (its value before being added to the layer) to the layer's current time. This is why the layer's timeOffset must be set to 0 rather thankInitialTimeOffset when the animation is added. Otherwise, the animation's beginTime will have already taken kInitialTimeOffset into account such that the animation is added to the time range(kInitialTimeOffset, kInitialTimeOffset + kDuration) instead of (0, kDuration).

这个方法 [CATransaction flush] 是必须的，因为，他能够强制的让系统给添加了动画的 layer 一个 beginTime 。这个动画的 beginTime  是添加了 layer 的起始值，这就是为什么 layer 的 timeOffset 必须设置成 0 ，而不是 kInitalTimeOffset。所以，这个动画的 beginTime 会考虑到 kInitialTimeOffset ，然后他的时间就被设置成了 （kIntialTimeOffset, kInitialTimeOffset + kDuration）， 而不是 （0， kDuration）【能力有限，此段翻译不准，见谅】

More Info

• This example was inspired by Controlling Animation Timing by David Rnnqvist
• Apple's Timing, Timespaces, and CAAnimation is a helpful resource.
• 这个例子的灵感来自于  Controlling Animation Timing by David Rnnqvist
• 苹果的  Timing, Timespaces, and CAAnimation 也很管用