QIY.gif
从今天起demo的代码分OC和Swift两种，以便满足所有同学的需求，但是讲解代码还是OC
突然发现爱奇艺的视频加载动画可以用CAShapeLayer做出来，之前在提交动画里已经详细介绍过CAShapeLayer用法及其属性，不懂得请看iOS动画之CAShapeLayer(一)提交动画
任何动画都是一步步完成的，所以以后遇到复杂的动画不要着急，把动画拆分了，就不难了。
拆分动画
- 一个圆慢慢画出来；
- 圆慢慢的消失；
- 圆消失的同时三角形旋转360度。
一个圆慢慢画出来
还记得上个文章里的话吗：理论上，所有描线的动画你都可以用这种方式先指定一个 path 然后改变 strokeEnd, strokeStart 来实现。
那么一个圆慢慢出来怎么做，首先需要一个path，path其实是个圆
//画一个圆
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:self.bounds];
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.fillColor=[UIColor clearColor].CGColor;
//将路径赋值给CAShapeLayer
maskLayer.path = path.CGPath;
//设置路径的颜色
maskLayer.strokeColor=[UIColor colorWithRed:0.52f green:0.76f blue:0.07f alpha:1.00f].CGColor;
//设置路径的宽度
maskLayer.lineWidth=1;
maskLayer.lineCap=kCALineCapRound;
[self.layer addSublayer:maskLayer];
接下来要开始动画了
self.maskLayer.strokeStart=0;
//设置strokeEnd的最终值，动画的fromValue为0，strokeEnd的最终值为0.98
self.maskLayer.strokeEnd=0.98;
CABasicAnimation *BasicAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
BasicAnimation.fromValue=@(0);
BasicAnimation.duration=NSTimeInterval;
BasicAnimation.delegate=self;
[BasicAnimation setValue:@"BasicAnimationEnd" forKey:@"animationName"];
[self.maskLayer addAnimation:BasicAnimation forKey:@"BasicAnimationEnd"];
这样完成后一个圆就慢慢出现
setup1.gif
圆慢慢的消失
怎么让一个圆慢慢消失呢，那请问你怎么让一个圆出的？是通过改变strokeEnd从0->0.98
画圆结束后strokeEnd为0.98
那么让strokeStart从0->0.98 strokeStart与strokeEnd一样那么圆不就消失了吗
self.maskLayer.strokeStart=0.98;
CABasicAnimation *BasicAnimation=[CABasicAnimation animationWithKeyPath:@"strokeStart"];
BasicAnimation.fromValue=@(0);
BasicAnimation.duration=NSTimeInterval;
BasicAnimation.delegate=self;
[BasicAnimation setValue:@"BasicAnimationStart" forKey:@"animationName"];
[self.maskLayer addAnimation:BasicAnimation forKey:@"BasicAnimationStart"];
setup2.gif
代码和画圆差不多，就不多解释了
圆消失的同时三角形旋转360度
//开始三角形旋转
CABasicAnimation *BasicAnimation=[CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
BasicAnimation.toValue=@(M_PI*2);
BasicAnimation.duration=NSTimeInterval;
BasicAnimation.delegate=self;
[BasicAnimation setValue:@"BasicAnimationRotation" forKey:@"animationName"];
[self.centerImage.layer addAnimation:BasicAnimation forKey:@"BasicAnimationRotation"];
最基本的CABasicAnimation真的不需要多解释了
如果感觉这篇文章对您有所帮助，顺手点个喜欢，谢谢啦
代码放在了GitHub上大家可以下载。
网友评论