ios - 使用 CAKeyFrameAnimation 的时变绘图的高效动画

Question

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

我的绘图加速度随时间变化，因此我使用 CAKeyFrameAnimation 和 keyTimes 构建了我的动画。目前，我只有一个指定绘图所有点的贝塞尔曲线路径，我将路径添加到我的 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 设置动画？或者这真的是最好的方法吗？

提前致谢

Answer 1

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