iOS动画之贝塞尔曲线和PaintCode

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

通常的实现方法是利用CAKeyframeAnimationpath属性,这个属性接受一个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];

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容