采用的三次曲线方式绘制path
关键坐标计算
image
在iOS中坐标原点在左上角
controlPoint1 = CGPointMake((prePonit.x+nowPoint.x)/2, prePonit.y);
controlPoint2 = CGPointMake((prePonit.x+nowPoint.x)/2, nowPoint.y)
/**
画曲线
@param points allPoints description
*/
- (void)drawPathWithPoints:(NSArray *)points{
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint prePonit;
for (int i =0; i<points.count; i++) {
if (i==0) {
// 起点
[path moveToPoint:[points[0] CGPointValue]];
prePonit = [points[0] CGPointValue];
}else{
CGPoint nowPoint = [points[i] CGPointValue];
// 三次曲线
[path addCurveToPoint:nowPoint controlPoint1:CGPointMake((prePonit.x+nowPoint.x)/2, prePonit.y) controlPoint2:CGPointMake((prePonit.x+nowPoint.x)/2, nowPoint.y)];
prePonit = nowPoint;
}
}
// 创建CAShapeLayer
CAShapeLayer *layer = [CAShapeLayer layer];
layer.fillColor = [UIColor clearColor].CGColor;
layer.lineWidth = 1.0f;
layer.lineCap = kCALineCapRound;
layer.lineJoin = kCALineJoinRound;
layer.strokeColor = [UIColor blueColor].CGColor;
[self.view.layer addSublayer:layer];
layer.path = path.CGPath;
// 创建Animation
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animation.fromValue = @(0.0);
animation.toValue = @(1.0);
layer.autoreverses = NO;
animation.duration = 4.0;
// 设置layer的animation
[layer addAnimation:animation forKey:nil];
}
效果图
image
GitHub：https://github.com/quzhongyeluo/DrawBezierPathWithPointArray
