ios – 动画Bezier曲线,就像在iPhone屏幕上绘制一样

如何在UIKit中绘制bezier路径？

创建一个UIBezierPath对象,然后使用various methods on it to construct your path.

我怀疑你最感兴趣的方法是：

> moveToPoint:(相当自我解释,将当前点移动到给定点)
> addLineToPoint:(添加一条直线,从当前点开始到给定点结束)
> addCurveToPoint:controlPoint1:controlPoint2:(添加贝塞尔曲线,开始当前点,设置终点和控制点)
> addQuadCurveToPoint:controlPoint:从当前点开始,使用设定的终点和控制点添加二次曲线.

例如,像这样的东西将创建一个带有二次曲线的简单贝塞尔曲线路径：

UIBezierPath* yourPath = [UIBezierPath bezierPath]; // create the bezier path
[yourPath moveToPoint:CGPointMake(100,100)]; // move to your starTing point
[yourPath addQuadCurveToPoint:CGPointMake(300,500) controlPoint:CGPointMake(500,350)]; // add a new quad curve to the point

但是,如果您习惯使用Photoshop之类的东西来创建路径,那么may be interested in PaintCode可以让您使用“所见即所得”的方法创建贝塞尔路径.

您可以将此UIBezierPath添加到CAShapeLayer的path属性中,以便在屏幕上显示它.

CAShapeLayer* yourShapeLayer = [CAShapeLayer layer]; // create your shape layer
yourShapeLayer.frame = CGRectMake(0,300,500); // assign it's frame
yourShapeLayer.path = yourPath.CGPath; // add your path to the shape layer
yourShapeLayer.fillColor = [UIColor clearColor].CGColor; // prevent the shape layer from filling

[self.view.layer addSublayer:yourShapeLayer]; // add the shape layer to the view

然后,您可以在形状图层上轻松设置strokeColor和lineWidth属性,以自定义路径的描边方式.

yourShapeLayer.strokeColor = [UIColor redColor].CGColor; // red stroke color
yourShapeLayer.lineWidth = 5.0; // 5 point stroke width

你应该得到这样的东西：

我怎么能像看不见的铅笔画在屏幕上那样动画呢？

您可以轻松创建一个CABasicAnimation,它可以为CAShapeLayer的strokeStart或strokeEnd属性设置动画,以实现所需的动画.

这可能会导致线条“被绘制”到屏幕上的动画效果.

例如,此代码将导致strokeEnd属性设置为0.0到1.0的动画,从而创建所需的效果：

yourShapeLayer.strokeStart = 0.0; // reset stroke start before animaTing

CABasicAnimation* strokeAnim = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; // create animation that changes the strokeEnd property
strokeAnim.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaSEOut]; // give it a nice timing function
strokeAnim.duration = 2.0; // duration of the animation
strokeAnim.fromValue = @(0.0); // provide the start value for the animation,wrapped in an NSnumber literal.
strokeAnim.toValue = @(1.0); // provide the end value for the animation,wrapped in an NSnumber literal.

[yourShapeLayer addAnimation:strokeAnim forKey:@"strokeAnim"]; // add animation to layer

如何缩放此路径以使用不同大小的屏幕？

我通常喜欢解决这个问题的方法是在给定的固定帧中定义路径点(比如说500 x 500点),然后根据屏幕大小生成比例因子(在你的情况下,你想要缩放到屏幕的宽度).

所以我们要做的就是生成比例因子.

CGFloat sf = self.view.frame.size.width/500.0; // The factor to scale the path by

然后,我们只需通过此比例因子将uIBezierPath中的所有点加倍.例如,采用我们之前的路径：

UIBezierPath* yourPath = [UIBezierPath bezierPath]; // create the bezier path
[yourPath moveToPoint:CGPointMake(100.0*sf,100.0*sf)]; // move to your starTing point
[yourPath addQuadCurveToPoint:CGPointMake(300.0*sf,500.0*sf) controlPoint:CGPointMake(500.0*sf,350.0*sf)];

现在,我们所要做的就是在我们的bezier路径点编程,好像我们总是在500 x 500帧中绘制它(我的点已经很好地适应了它).

您还需要更改CAShapeLayer的大小,使其平方并占据整个屏幕宽度.

yourShapeLayer.frame = CGRectMake(0,self.view.frame.size.width,self.view.frame.size.width);

最后,您希望将CAShapeLayer定位到屏幕的中心.您可以通过将图层的position属性设置为视图的中心来轻松完成此操作.

yourShapeLayer.position = self.view.center;

现在,您的路径应始终缩放以占据屏幕的宽度.

(我在图层中添加了灰色背景,仅用于说明缩放)

完整项目(为方便起见)：https://github.com/hamishknight/Drawing-Scaling-Animating-UIBezierPaths