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;
}

人已赞赏
iOS文章

IOS瀑布流通过UICollectionView控件实现

2020-5-4 18:16:55

iOS文章

ios 使用Safari浏览器跳转打开、唤醒app

2020-5-4 19:31:49

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索