UIBezierPath动画
1、前几篇主要是讲UIBezierPath 绘制基本图形,现在我们将这些图形用动画的形式展示出来。
效果图:
函数代码:
/**
* 曲线动画
*/
-(void)secondBeziePathDrawAnimation
{
//曲线
UIBezierPath *path=[UIBezierPath bezierPath];
//起点
[path moveToPoint:CGPointMake(20, 20)];
// 基本曲线
//[path addQuadCurveToPoint:CGPointMake(self.frame.size.width-30, 20) controlPoint:CGPointMake(self.frame.size.width/2., self.frame.size.height/2.)];
//二次曲线
[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=YES;
[sLayer addAnimation:slayerAnimat forKey:@"path"];
}