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

我想绘制泰姬陵墓穴轮廓的bezier路径。

Q1。 我怎么能在XCode中绘制它？ 我可以很容易地在PS中做到这一点，但我发现很难以编程方式在XCode中进行，尤其是获取控制点的坐标。

Q2。 此外，当屏幕尺寸变化时，如何固定点的坐标？

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

Answer 1

如何在UIKit绘制bezier路径？

创建一个UIBezierPath对象，然后使用它上面的各种方法构建您的路径 。

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

• moveToPoint:相当自我解释，将当前点移动到给定点）

• addLineToPoint:添加一条直线，从当前点开始到给定点结束）

• addCurveToPoint:controlPoint1:controlPoint2:添加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之类的东西来创建路径，那么您可能对PaintCode感兴趣 ，这可以让您使用“ 所见即所得 ”的方法创建贝塞尔路径。

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

 CAShapeLayer* yourShapeLayer = [CAShapeLayer layer]; // create your shape layer yourShapeLayer.frame = CGRectMake(0, 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 ，它可以为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 。 例如，采用我们之前的路径：

 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, 0, self.view.frame.size.width, self.view.frame.size.width); 

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

 yourShapeLayer.position = self.view.center; 

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

（我在图层中添加了灰色背景，仅用于说明缩放）

---

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

Answer 2

我在2010年写了这篇博文： 使用CAShapeLayer动画绘制CGPath 。

它的要点是这样的：

• 使用您要绘制的形状创建UIBezierPath或CGPath 。 使用方法moveToPoint: ， addLineToPoint: , addCurveToPoint:controlPoint1:controlPoint2: addLineToPoint: addCurveToPoint:controlPoint1:controlPoint2:等来创建形状。
• 创建CGShapeLayer并指定图层path属性的path 。
• 将图层添加到视图/图层层次结构中（例如，在视图控制器中： [self.view.layer addSublayer:shapeLayer]; ）。 您还必须为图层指定有效的大小和位置（ frame ）。
• 将图层的strokeEnd属性设置为0到1。

Answer 3

originaluser2发布的答案解决了一切。 如果要为不同的设备屏幕调整贝塞尔曲线路径，您也可以尝试这种方式：

您可以简单地将UIView子类化并自定义其drawRect方法：

  - (void)drawRect: (CGRect)frame { //// Bezier Drawing UIBezierPath* bezierPath = [UIBezierPath bezierPath]; [bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.23370 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.65441 * CGRectGetHeight(frame))]; [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.49457 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.33088 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 0.23370 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.65441 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 0.35870 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.33088 * CGRectGetHeight(frame))]; [bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 0.77717 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.65441 * CGRectGetHeight(frame)) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 0.63043 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.33088 * CGRectGetHeight(frame)) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 0.77717 * CGRectGetWidth(frame), CGRectGetMinY(frame) + 0.65441 * CGRectGetHeight(frame))]; [UIColor.blackColor setStroke]; bezierPath.lineWidth = 1; [bezierPath stroke]; } 

框架50×50：

框架100×100：

框架100×50

如果您发送大小为50×50的帧，则会在大小为50×50的帧中绘制贝塞尔曲线。 此代码也会根据收到的帧大小自动resize。