ios 動畫 利用CAGradientLayer實現動畫

標籤：har   lock   cat   hit   start   邊框   sha   cloc   技術分享   

先看下片

分析步驟：

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實現動畫