使用 CAKeyFrameAnimation 实现时变绘图的高效动画答案

【问题标题】：Efficient animation of time-variant drawing using CAKeyFrameAnimation使用 CAKeyFrameAnimation 实现时变绘图的高效动画
【发布时间】：2013-03-11 15:57:25
【问题描述】：

我目前的目标是在我的 iOS 应用程序中绘制动画，以便用户可以在他们的屏幕上看到类似http://www.youtube.com/watch?v=xlDmk5WdaHk 的内容。

我的绘图速度随时间而变化，因此我使用CAKeyFrameAnimation 和keyTimes 构建了我的动画。目前，我只有一个指定绘图的所有点的 Bezier 路径，我将路径添加到我的 CAShapeLayer 对象，然后在我开始动画时将路径传递给我的动画对象。

我的问题：完成的绘图立即出现在屏幕上，然后我的笔形光标根据我的keyTimes 值沿着图片移动，而不是让笔触颜色与我的在屏幕上移动笔光标以产生与视频相同的效果。

我注意到这个 SO 问题，推荐的解决方案是为动画中的每个点生成单独的路径：How to Animate CoreGraphics Drawing of Shape Using CAKeyframeAnimation

鉴于我有 100-300 个单独的点，是否有一种更有效的方法来生成随时间变化的绘图，而不是创建一个包含几百条路径（每条路径中有几百个值）的数组，其中的路径这种形式：

path0 = point0...point0...point0...point0... 
path1 = point0...point1...point1...point1...
path2 = point0...point1...point2...point2...
path3 = point0...point1...point2...point3...

然后获取路径数组，将其传递给myAnimation.values 并使用我的keyTimes 为values 设置动画？或者这真的是解决这个问题的最佳方式吗？

提前致谢

【问题讨论】：

标签： ios core-animation cakeyframeanimation cashapelayer

【解决方案1】：

如果您的点在贝塞尔路径上，肯定有更有效的方法。 CAShapeLayer 有两个小属性，称为 strokeStart 和 strokeEnd。如果您最初将 strokeEnd 设置为零，那么您的路径将不会显示。在 1.0 时，它将完全显示。将值从零增加到一将相应地跟踪您的曲线。这是一个可动画属性，因此将其值与其他动画的关键时间同步，您的绘图将显示为“笔”移动。

【讨论】：