美文网首页
UIBezierPath动起来[UIBezierPath画图基础

UIBezierPath动起来[UIBezierPath画图基础

作者: 萧过 | 来源:发表于2016-08-03 16:37 被阅读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

相关文章

网友评论

      本文标题:UIBezierPath动起来[UIBezierPath画图基础

      本文链接:https://www.haomeiwen.com/subject/pugqsttx.html