介紹一個(gè)簡(jiǎn)單好玩的動(dòng)畫給各位默默敲碼的攻城獅們。一個(gè)基于Layer層的環(huán)型進(jìn)度條的動(dòng)畫吧，這個(gè)動(dòng)畫我們可以在加載數(shù)據(jù)和倒計(jì)時(shí)的時(shí)候看到，還有錄制小視頻時(shí)的一個(gè)小動(dòng)畫吧。
關(guān)鍵技術(shù)就是用CAShaperLayer構(gòu)建一個(gè)圓形的圖層，再用貝塞爾曲線來繪制一個(gè)邊，通過動(dòng)畫了來控制一個(gè)叫做“strokeEnd”的屬性讓一個(gè)邊顯示出來。
網(wǎng)上對(duì)strokeEnd和strokeStart的解釋是 對(duì)繪制的Path進(jìn)行分區(qū)。這兩個(gè)屬性的值在0~1之間，0代表Path的開始位置，1代表Path的結(jié)束位置。是一種線性遞增關(guān)系。strokeStart默認(rèn)值為0，strokeEnd默認(rèn)值為1。這兩個(gè)屬性都支持動(dòng)畫。http://www.cocoachina.com/ios/20160711/17007.html 這篇文章有相關(guān)介紹。
這里展示一下代碼，

//----------------  環(huán)行進(jìn)度條動(dòng)畫  -----------------------
    CGRect ScreenRect= [[UIScreen mainScreen] bounds];
    
    self.view.backgroundColor = [UIColor whiteColor];
    
    CAShapeLayer * circleLayer = [CAShapeLayer layer];
    circleLayer.frame = CGRectMake(0, 0, 200, 200);
    circleLayer.position = CGPointMake(CGRectGetWidth(ScreenRect)/2, CGRectGetHeight(ScreenRect)/2);
    UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:circleLayer.bounds];
    circleLayer.path = path.CGPath;
    circleLayer.fillColor = [[UIColor clearColor] CGColor];
    circleLayer.lineWidth = 2.0f;
    circleLayer.strokeColor = [[UIColor cyanColor] CGColor];
    [self.view.layer addSublayer:circleLayer];
    
    CABasicAnimation * progressAnima = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    progressAnima.duration = 5;
    progressAnima.timingFunction = [CAMediaTimingFunction functionWithName: kCAMediaTimingFunctionEaseInEaseOut];
    progressAnima.repeatCount = HUGE_VALF;//無限次
    progressAnima.fromValue = @0.0;
    progressAnima.toValue   = @1.0;
    progressAnima.fillMode = kCAFillModeForwards;
    progressAnima.removedOnCompletion = YES;
    
    [circleLayer addAnimation:progressAnima forKey:@"progressAnimation"];

動(dòng)畫原理就是讓strokeEnd這個(gè)屬性值由0.0 ---> 1.0這么一個(gè)過程，有點(diǎn)抽象吧，大家知道怎么用就行了。

Untitled.gif