iOS 漸變顏色進度條-動畫特效

項目中可能會用到進度條,現提供了一種顏色漸變帶動畫特效的進度條,代碼如下


-(void)gradentWith:(CGRect)frame{
    //創建path
    UIBezierPath *path = [UIBezierPath bezierPath];
    // 添加路徑[1條點(100,100)到點(200,100)的線段]到path
    [path moveToPoint:CGPointMake(20 , 290)];
    [path addLineToPoint:CGPointMake(250, 290)];
    // 將path繪製出來
    [path stroke];
    //遮罩層
    _progressLayer = [CAShapeLayer layer];
    _progressLayer.frame = self.view.bounds;
    _progressLayer.fillColor =[[UIColor clearColor] CGColor];
    _progressLayer.strokeColor=[UIColor redColor].CGColor;
    _progressLayer.lineCap = kCALineCapRound;
    _progressLayer.lineWidth = 20;
    //漸變圖層
    CALayer * grain = [CALayer layer];
    CAGradientLayer *gradientLayer =[CAGradientLayer layer];
    UIColor * fixColor=[UIColor blueColor];
    //    UIColor * fixColor  = [UIColor colorWithRed:48/255.0 green:149/255.0 blue:215/255.0 alpha:1];
    UIColor * preColor=[UIColor whiteColor];
    gradientLayer.frame = CGRectMake(0, 0, self.view.bounds.size.width, self.view.bounds.size.height);
    [gradientLayer setColors:[NSArray arrayWithObjects:(id)[preColor CGColor],(id)[fixColor CGColor], nil]];
    // 設置顏色的分割點
    [gradientLayer setLocations:@[@0.01,@1]];
    // 開始點
    [gradientLayer setStartPoint:CGPointMake(0, 0)];
    // 結束點
    [gradientLayer setEndPoint:CGPointMake(1, 1)];
    [grain addSublayer:gradientLayer];
    [grain setMask:_progressLayer];
    [self.view.layer addSublayer:grain];
    //增加動畫
    CABasicAnimation *pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    pathAnimation.duration = 1;
    pathAnimation.timingFunction=[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionLinear];
    pathAnimation.fromValue=[NSNumber numberWithFloat:0.0f];
    pathAnimation.toValue=[NSNumber numberWithFloat:1.0f];
    pathAnimation.autoreverses=NO;
    //pathAnimation.repeatCount = INFINITY;
    [_progressLayer addAnimation:pathAnimation forKey:@"strokeEndAnimation"];
    _progressLayer.path=path.CGPath;
}

 

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