[英]Animating Bezier curve as though drawing proceeds on iPhone screen
我想绘制一条泰姬陵墓葬轮廓的bezier路径。
Q1。 我怎么能在XCode中绘制它? 我可以轻松地在PS中做到这一点,但我发现很难在编程中以XCode方式进行,特别是获取控制点的坐标。
Q2。 此外,当屏幕尺寸变化时,如何固定点的坐标?
Q3。 我怎么能像看不见的铅笔画在屏幕上那样动画呢?
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
到path
一个财产CAShapeLayer
,以显示它在屏幕上。
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
的财产CAShapeLayer
,以达到您想要的动画。
这可能会导致线条“被绘制”到屏幕上的动画效果。
例如,此代码将导致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
我在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。 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];
}
框架50x50:
框架100x100:
框架100x50
如果您发送大小为50x50的帧,则会在大小为50x50的帧中绘制贝塞尔曲线。 此代码也会根据收到的帧大小自动调整大小。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.