UIBezierPath动起来[UIBezierPath画图基础实例]

UIBezierPath动画

1、前几篇主要是讲UIBezierPath 绘制基本图形,现在我们将这些图形用动画的形式展示出来。

效果图:


UIBezierPath动起来[UIBezierPath画图基础实例]_第1张图片
UIBezierPath动起来[UIBezierPath画图基础实例]_第2张图片

函数代码:

/**

*  曲线动画

*/

-(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"];

}

你可能感兴趣的:(UIBezierPath动起来[UIBezierPath画图基础实例])