?? 當(dāng)你司產(chǎn)品需要一些花里胡哨的加載動(dòng)畫時(shí)锣枝。扫尺。。（ps：UI小姐姐給我來個(gè)gif圖完事咒彤。UI小姐姐：滾，自己整）
比如下面的效果：

轉(zhuǎn)圈圈.gif

so 第一步

以左上的圓弧為本體，先在背景View上用UIBezierPath 畫一個(gè)圓弧替蛉，大概角度是M_PI*5/6 到 M_PI * 3/2,由于不是完全的1/3贯溅，所以起始角度+了M_PI/6

    self.view.backgroundColor = [UIColor blackColor];
    UIView *v = [[UIView alloc]initWithFrame:CGRectMake(100, 200, 100, 100)];
    [self.view addSubview:v];
    
    UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(50, 50) radius:20 startAngle:M_PI*5/6+M_PI/6 endAngle:M_PI * 3/2 clockwise:YES];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path = path.CGPath;
    layer.fillColor = [UIColor clearColor].CGColor;
    layer.strokeColor = [UIColor whiteColor].CGColor;
    layer.lineWidth = 5;
    layer.lineCap = @"round";

第二步

動(dòng)畫已經(jīng)被我分解了，流程是 圓弧變長灭返，停留盗迟，再變短，停留熙含。此外還加上一個(gè)整體的旋轉(zhuǎn)罚缕。
所以第二步給圓弧layer增加一個(gè)圓弧變長，停留怎静，再變短邮弹，停留的動(dòng)畫組黔衡。

    CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    animation.fromValue = [NSNumber numberWithFloat:0];
    animation.toValue = [NSNumber numberWithFloat: 1];
    animation.duration = 0.66;
    animation.removedOnCompletion = NO;
    animation.fillMode = kCAFillModeForwards;
    
    CABasicAnimation *anim = [CABasicAnimation animationWithKeyPath:@"strokeStart"];
    anim.fromValue = [NSNumber numberWithFloat:0];
    anim.toValue = [NSNumber numberWithFloat: 0.95];
    anim.duration = 0.66;
    anim.beginTime = 0.66+0.2;
    anim.removedOnCompletion = NO;
    anim.fillMode = kCAFillModeForwards;
    
    CAAnimationGroup *group = [CAAnimationGroup animation];
    group.animations =@[animation,anim];
    group.fillMode = kCAFillModeForwards;
    group.duration = (0.66+0.2)*2;
    group.repeatCount = MAXFLOAT;
    [layer addAnimation:group forKey:nil];

第三步

添加CAReplicatorLayer，復(fù)制圓弧layer 腌乡。

    CAReplicatorLayer *replicatorrLayer = [CAReplicatorLayer layer];
    replicatorrLayer.frame = v.bounds;
    [v.layer addSublayer:replicatorrLayer];
    [replicatorrLayer addSublayer:layer];
    
    replicatorrLayer.instanceCount = 3; //復(fù)制 sublayer 的個(gè)數(shù)盟劫，包括創(chuàng)建的第一個(gè)sublayer 在內(nèi)的個(gè)數(shù)
    replicatorrLayer.instanceDelay = 0; //設(shè)置動(dòng)畫延遲執(zhí)行的時(shí)間
    replicatorrLayer.instanceAlphaOffset = 0;   //設(shè)置透明度遞減
    replicatorrLayer.instanceTransform = CATransform3DMakeRotation(M_PI*2/3, 0, 0, 1);//復(fù)制條位置偏移

最后一步

給整體增加一個(gè)旋轉(zhuǎn)動(dòng)畫，完事与纽。

    CABasicAnimation *animation1 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation1.fromValue = [NSNumber numberWithFloat:0];
    animation1.toValue = [NSNumber numberWithFloat:M_PI*2/3];
    animation1.duration = 0.66;
    animation1.removedOnCompletion = NO;
    animation1.fillMode = kCAFillModeForwards;
    
    CABasicAnimation *animation2 = [CABasicAnimation animationWithKeyPath:@"transform.rotation.z"];
    animation2.fromValue = [NSNumber numberWithFloat:0];
    animation2.toValue = [NSNumber numberWithFloat:M_PI*2/3+M_PI/6];
    animation2.duration = 0.66;
    animation2.beginTime = 0.66+0.2;
    animation2.removedOnCompletion = NO;
    animation2.fillMode = kCAFillModeForwards;
    
    CAAnimationGroup *group1 = [CAAnimationGroup animation];
    group1.animations =@[animation1,animation2];
    group1.duration = (0.66+0.2)*2;
    group1.repeatCount = MAXFLOAT;
    [replicatorrLayer addAnimation:group1 forKey:nil];

以上代碼最后做出來的效果如下：

轉(zhuǎn)loading.gif

loading.gif

loading1.gif

完整代碼