UIBezierPath动起来[UIBezierPath画图基础

2016-08-03  本文已影响0人  萧过

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

上一篇下一篇

猜你喜欢

热点阅读