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

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

- (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地址：加载动画