美文网首页
iOS动画之贝塞尔曲线和PaintCode

iOS动画之贝塞尔曲线和PaintCode

作者: 一刀切 | 来源:发表于2016-08-18 10:17 被阅读0次

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

相关文章

网友评论

      本文标题:iOS动画之贝塞尔曲线和PaintCode

      本文链接:https://www.haomeiwen.com/subject/fbrvsttx.html