簡單彩虹動畫的效果實現

簡單彩虹動畫的效果實現

我們先看下最後的效果圖

1、首先我們使用UIBezierPath類畫一個圓弧，使用方法
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;

center 圓弧的位置
radius 圓弧的弧度
startAngle 開始的地方
endAngle 結束的地方

2、使用CAShapeLayer類給圓弧一個基礎層

        _progressLayer = [CAShapeLayer layer];//創建
        _progressLayer.frame = self.bounds;//位置
        _progressLayer.fillColor =  [[UIColor clearColor] CGColor];//填充顏色
        _progressLayer.strokeColor=[UIColor redColor].CGColor;//弧形顏色
        _progressLayer.lineCap = kCALineCapRound;
        _progressLayer.lineWidth = PROGRESS_LINE_WIDTH;

3、使用CAGradientLayer類做一個彩虹顏色漸變的效果填充到上面

  CAGradientLayer *gradient =  [CAGradientLayer layer];//創建對象
        gradient.frame = _progressLayer.frame;
        [gradient setColors:[NSArray arrayWithObjects:(id)[[UIColor redColor] CGColor],(id)[[UIColor yellowColor] CGColor],(id)[[UIColor redColor] CGColor],(id)[[UIColor yellowColor] CGColor],(id)[[UIColor blueColor] CGColor],(id)[[UIColor redColor] CGColor], nil]];//設置顏色
        [gradient setLocations:@[@0,@0.3,@0.5,@0.6,@0.8,@1]];//每種顏色最後的位置
        [gradient setStartPoint:CGPointMake(0, 0)];//起始點
        [gradient setEndPoint:CGPointMake(1, 0)];//結束點

        [gradient setMask:_progressLayer];//截取圓弧
        [self.layer addSublayer:gradient];//添加

做到這裏就差不多完了。。。
再做一個動畫的效果吧
4、動畫我使用的是CABasicAnimation類

 CABasicAnimation *animation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
        animation.duration = 2;
        animation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut];
        animation.fromValue=[NSNumber numberWithFloat:0.0f];
        animation.toValue=[NSNumber numberWithFloat:1.0f];
        animation.autoreverses=NO;
        _progressLayer.path=path.CGPath;
        [_progressLayer addAnimation:animation forKey:@"strokeEndAnimation"];

這樣的話就達到了開始的圖片的效果了，

寫得不好的地方希望大神指點。