1、效果图:
函数代码:
/**
* 二次曲线动画
*/
-(void)secondBeziePathDrawAnimation1
{
//曲线
UIBezierPath *path=[UIBezierPath bezierPath];
//起点
[path moveToPoint:CGPointMake(20, 20)];
//二次曲线
[path addCurveToPoint:CGPointMake(self.frame.size.width-30, 20) controlPoint1:CGPointMake(self.frame.size.width/4., 0) controlPoint2:CGPointMake(120., 120)];
CAShapeLayer *sLayer=[CAShapeLayer layer];
sLayer.fillColor=[UIColor clearColor].CGColor;
//画笔颜色
sLayer.strokeColor=[UIColor redColor].CGColor;
//画笔宽度
sLayer.lineWidth=2.f;
//路径
sLayer.path=path.CGPath;
sLayer.strokeStart=0.5;
sLayer.strokeEnd=.5;
[self.layer addSublayer:sLayer];
//动画效果
CABasicAnimation *slayerAnimat=[CABasicAnimation animationWithKeyPath:@"strokeStart"];
slayerAnimat.duration=5;
slayerAnimat.fromValue=[NSNumber numberWithFloat:0.5];
slayerAnimat.toValue=[NSNumber numberWithFloat:0.];
slayerAnimat.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
slayerAnimat.fillMode=kCAFillModeForwards;
slayerAnimat.removedOnCompletion=NO;
[sLayer addAnimation:slayerAnimat forKey:@"path"];
// //动画效果
CABasicAnimation *slayerAnimat1=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
slayerAnimat1.duration=5;
slayerAnimat1.fromValue=[NSNumber numberWithFloat:0.5];
slayerAnimat1.toValue=[NSNumber numberWithFloat:1];
slayerAnimat1.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
slayerAnimat1.fillMode=kCAFillModeForwards;
slayerAnimat1.removedOnCompletion=NO;
[sLayer addAnimation:slayerAnimat1 forKey:@"path1"];
}
/**
* 二次曲线线逐渐变粗动画
*/
-(void)secondBeziePathLineWidthDrawAnimation
{
//曲线
UIBezierPath *path=[UIBezierPath bezierPath];
//起点
[path moveToPoint:CGPointMake(20, 20)];
//二次曲线
[path addCurveToPoint:CGPointMake(self.frame.size.width-30, 20) controlPoint1:CGPointMake(self.frame.size.width/4., 0) controlPoint2:CGPointMake(120., 120)];
CAShapeLayer *sLayer=[CAShapeLayer layer];
sLayer.fillColor=[UIColor clearColor].CGColor;
//画笔颜色
sLayer.strokeColor=[UIColor redColor].CGColor;
//画笔宽度
sLayer.lineWidth=2.f;
//路径
sLayer.path=path.CGPath;
sLayer.strokeStart=0.;
sLayer.strokeEnd=1;
[self.layer addSublayer:sLayer];
//动画效果
CABasicAnimation *slayerAnimat=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
slayerAnimat.duration=5;
slayerAnimat.fromValue=[NSNumber numberWithFloat:0.];
slayerAnimat.toValue=[NSNumber numberWithFloat:1.];
slayerAnimat.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
slayerAnimat.fillMode=kCAFillModeForwards;
slayerAnimat.removedOnCompletion=NO;
[sLayer addAnimation:slayerAnimat forKey:@"path"];
// //动画效果
CABasicAnimation *slayerAnimat1=[CABasicAnimation animationWithKeyPath:@"lineWidth"];
slayerAnimat1.duration=5;
slayerAnimat1.fromValue=[NSNumber numberWithFloat:0];
slayerAnimat1.toValue=[NSNumber numberWithFloat:10];
slayerAnimat1.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
slayerAnimat1.fillMode=kCAFillModeForwards;
slayerAnimat1.removedOnCompletion=NO;
[sLayer addAnimation:slayerAnimat1 forKey:@"path1"];
}
以上教程的所有项目源代码;https://github.com/fb2012/IOS/tree/master/UIBezierPathStady
网友评论