iOS 拆分一个爱奇艺动画

animation.gif

拆分动画,除了系统的preview动画,推荐一个视频转动画的软件:Gif brewery,通过brewery我们可以一帧一帧的画面,帮助理解动画效果。

这个动画可以分为两个步骤:
1、stroke end > stroke start (渐渐显示3/4个圆弧)也就是说stroke start走到1/4,同时stroke end 绘制完一圈。
2、stroke end 等待 stroke start(圆弧渐渐消失),起点不原地不动,等待终点追赶。

中间的圆弧的是这样的,通过系统的preview动画可以看到:
QQ20171204-154550.png

思路就是把时间分割,然后装进动画组里:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
- (void)loadingAnimation {
CABasicAnimation *beginStart = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
beginStart.fromValue = @0;
beginStart.toValue = @.25;
beginStart.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
beginStart.duration = self.animationDuration * 2 / 3.0;
CABasicAnimation *beginEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
beginEnd.fromValue = @0;
beginEnd.toValue = @1.;
beginEnd.duration = self.animationDuration * 2 / 3.0;
上面的部分生成3/4个圆弧。
//剩下的时间用来等待
CABasicAnimation *endStart = [CABasicAnimation animation];
endStart.keyPath = @"strokeStart";
endStart.beginTime = self.animationDuration * 2 / 3.0;
endStart.duration = self.animationDuration / 3.0;
endStart.fromValue = @(0.25f);
endStart.toValue = @(1.f);
endStart.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
CABasicAnimation *endend = [CABasicAnimation animation];
endend.keyPath = @"strokeEnd";
endend.beginTime = self.animationDuration * 2 / 3.0;
endend.duration = self.animationDuration / 3.0;
endend.fromValue = @(1.f);
endend.toValue = @(1.f);
endend.timingFunction = [CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
CAAnimationGroup *strokeAniamtionGroup = [CAAnimationGroup animation];
strokeAniamtionGroup.duration = self.animationDuration;
strokeAniamtionGroup.animations = @[beginStart,beginEnd,endStart,endend];
strokeAniamtionGroup.removedOnCompletion = NO;
strokeAniamtionGroup.fillMode = kCAFillModeForwards;
strokeAniamtionGroup.repeatCount = INTMAX_MAX;
[self.loadingLayer addAnimation:strokeAniamtionGroup forKey:@"strokeAniamtionGroup"];
}

demo地址:加载动画