iOS动画之CAShapeLayer(二)爱奇艺加载动画

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上大家可以下载。

iOS动画之CAShapeLayer(二)爱奇艺加载动画