ios 動畫 利用CAGradientLayer實現動畫
阿新 • • 發佈:2017-09-23
class view code rom basic ear idg 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實現動畫