ios动画之贝塞尔曲线和PaintCode

iOS动画之贝塞尔曲线和PaintCode

项目中遇到几个动画效果，需要一个 UIImageView 沿着一个特定的路径移动，美术的设计是这样的：

通常的实现方法是利用CAKeyframeAnimation的path属性，这个属性接受一个UIBezierPath，可以使得layer沿着path移动，代码如下:

// 这个不是飞碟的动画，就是个例子:-D
UIBezierPath *customPath = [UIBezierPath bezierPath];
[customPath moveToPoint:CGPointMake(100,100)];
[customPath addLineToPoint:CGPointMake(200,100)];
CAKeyframeAnimation *pathAnimation = [CAKeyframeAnimation animationWithKeyPath:@"position"];
pathAnimation.duration = 4.0f;
pathAnimation.path = customPath.CGPath;  // 加入贝塞尔路径
pathAnimation.calculationMode = kCAAnimationLinear;
[movingLayer addAnimation:pathAnimation forKey:@"movingAnimation"];

但是问题来了，这条贝塞尔如何制作，难道纯粹意淫，或是让美术标坐标？美术表示鸭梨山大啊，贝塞尔曲线咋标啊？如果像下面这样标条线，你会打死美术吗？

所以怎么获取到这条曲线的坐标呢？ 这要说到这篇文章的重点了，我使用了PainCode来生成。他的界面是这样的：

是不是和sketch很像，操作方法也类似，具体使用细节不说了，这里说几个重要的地方：

• 用钢笔工具画线
• 选择infinite display
• 选中一个锚点后，选择make point round

把下面生成的代码放进工程里面，就可以了。需要注意一点，只需要bezier path的代码即可，画图的部分是不需要的，下面这些代码不要了：

[UIColor.blackColor setStroke];
bezierPath.lineWidth = 1;
[bezierPath stroke];