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);
     _gradlayer.colors=@[(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;
      
    }
}

效果圖在這裏插入圖片描述

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章