美文网首页
iOS 渐变色进度条

iOS 渐变色进度条

作者: _桃夭大人_ | 来源:发表于2016-07-12 16:04 被阅读2289次

    - (void)gradentWith:(CGRect)frame{

    // 创建path

    UIBezierPath *path = [UIBezierPath bezierPath];

    // 添加路径[1条点(100,100)到点(200,100)的线段]到path

    [path moveToPoint:CGPointMake(10 , 290)];

    [path addLineToPoint:CGPointMake(250, 290)];

    // 将path绘制出来

    [path stroke];

    //遮罩层

    _progressLayer = [CAShapeLayer layer];

    _progressLayer.frame = self.bounds;

    _progressLayer.fillColor =  [[UIColor clearColor] CGColor];

    _progressLayer.strokeColor=[UIColor redColor].CGColor;

    _progressLayer.lineCap = kCALineCapRound;

    _progressLayer.lineWidth = 10;

    //渐变图层

    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.bounds.size.width, self.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.layer addSublayer:grain];

    //增加动画

    CABasicAnimation *pathAnimation=[CABasicAnimation animationWithKeyPath:@"strokeEnd"];

    pathAnimation.duration = 6;

    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;

    }

    相关文章

      网友评论

          本文标题: iOS 渐变色进度条

          本文链接:https://www.haomeiwen.com/subject/kwoyqttx.html