CAGradientLayer漸變

CAGradientLayer

可以用來處理漸變色的圖層結構，也可以用來做隐式動畫，大部分時間和CAShapeLayer配和使用

相關屬性

常用屬性
 NSArray   colors 顔色配置設定 至少要2種顔色
 NSArray<NSNumber *>locations 顔色分割線，顔色之間的界限
 CGPoint startPoint 顔色起點
 CGPoint endPoint   顔色結束點
           

demo

漸變色環形進度條

@property(nonatomic,strong)UIView *contentMaksView; 遮罩層
@property(nonatomic,strong) CAGradientLayer *gradlayer; 漸變
@property(nonatomic,strong) NSTimer *waterTimer; 定時器
@property(nonatomic,strong) CAShapeLayer *shapeLayer; 繪制

    //貝塞爾曲線路徑畫圓
    UIBezierPath *bezi = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10,10,100,100)];
    //建立繪制對象
    CAShapeLayer *layer = [[CAShapeLayer alloc] init];
    //擷取路徑
    layer.path = bezi.CGPath;
    
    //路徑顔色
    layer.strokeColor = [UIColor redColor].CGColor;
    //填充色
    layer.fillColor = [UIColor whiteColor].CGColor;
    //線寬
    layer.lineWidth = 20;
    //開始值
    layer.strokeStart = 0;
    //結束值
    layer.strokeEnd = 0;
    //預設不設定是實線繪制，如果設定那麼會虛線繪制前一個值是繪制虛線粗細，後一個值間隔粗細
    layer.lineDashPattern = @[@6,@2];
    self.shapeLayer = layer;
 
    
  
   
    //漸變圖層
    _gradlayer = [CAGradientLayer layer];
    
    [ _gradlayer setStartPoint:CGPointMake(0.3, 0.5)];
    
    [ _gradlayer setEndPoint:CGPointMake(1, 1)];
    _gradlayer.frame = CGRectMake(0,0,frame.size.width, frame.size.height);
     [email protected][(id)[UIColor redColor].CGColor,(id)[UIColor yellowColor].CGColor,(id)[UIColor brownColor].CGColor,(id)[UIColor purpleColor].CGColor];
    [ _gradlayer setLocations:@[@0.2,@0.4,@0.7,@1.0]];
 
    //漸變圖層上添加一個遮擋圖層，在漸變圖層上顯示遮擋圖層形狀，
    [_gradlayer setMask:_shapeLayer];
    //将漸變圖層加入到view的layer上
    [self.layer addSublayer:_gradlayer];
  

    
    
    

    //遮擋圖層
    _contentMaksView = [[UIView alloc]initWithFrame:CGRectMake(9,9,102,102)];
    _contentMaksView.layer.cornerRadius = 50;
     _contentMaksView.layer.masksToBounds = YES;
    _contentMaksView.backgroundColor = [UIColor whiteColor];
  [self addSubview:_contentMaksView];
    
    
    //定時器
   self.waterTimer = [NSTimer scheduledTimerWithTimeInterval:0.1 target:self selector:@selector(waterAction) userInfo:nil repeats:YES];


- (void)waterAction{
    if (self.shapeLayer.strokeEnd >=1) {
        [self.waterTimer invalidate];
        self.waterTimer = nil;
        return;
    }else{
        self.shapeLayer.strokeEnd +=0.02;
      
    }
}

           

效果圖