项目中遇到几个动画效果,需要一个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];