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

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

}

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容