先看下效果圖片

分析步驟：

1. 先畫一個方形的layer，如果：

代碼如下：

CAGradientLayer *colorLayer = [CAGradientLayer layer];
    colorLayer.backgroundColor = [UIColor blueColor].CGColor;
    colorLayer.frame    = (CGRect){CGPointZero, CGSizeMake(200, 200)};
    colorLayer.position = self.view.center;
    [self.view.layer addSublayer:colorLayer];
    
    
 
// 顏色分配
    colorLayer.colors = @[(__bridge id)[UIColor redColor].CGColor,
                          (__bridge id)[UIColor whiteColor].CGColor,
                          (__bridge id)[UIColor redColor].CGColor];
    // 開始的位置 設置成超出界面這樣默認就沒有效果
    colorLayer.locations  = @[@(-0.2), @(-0.1), @(0)];
    
    // 起始點
 

    colorLayer.startPoint = CGPointMake(0, 0);
    
    // 結束點
    colorLayer.endPoint   = CGPointMake(1, 0);

2.設置光柵滑動效果

代碼如下：

    CABasicAnimation* fadeAnim = [CABasicAnimation animationWithKeyPath:@"locations"];
    // 起始位置 左側外邊
    fadeAnim.fromValue = @[@(-0.2), @(-0.1), @(0)];
    // 結束位置 右側外邊
    fadeAnim.toValue   = @[@(1.0
 
), @(1.1), @(1.2)];
    fadeAnim.duration  = 1.5;
    [colorLayer addAnimation:fadeAnim forKey:nil];

3.設置layer的mask遮罩，只顯示圓圈

   UIBezierPath* bezierPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(0, 0) radius:80 startAngle:DEGREES(0) endAngle:DEGREES(360) clockwise:YES];
    CAShapeLayer *layer = [CAShapeLayer layer];
    layer.path =bezierPath.CGPath;
    // 位置
    layer.position = CGPointMake(102, 100);
    // 填充顏色為透明
    layer.fillColor = [UIColor clearColor].CGColor;
    // 邊框顏色為紅色
    layer.strokeColor = [UIColor redColor].CGColor;
    // 設置遮罩，這就就顯示遮罩內容
    colorLayer.mask = layer;

這樣就完成最終效果了。

ios 動畫 利用CAGradientLayer實現動畫