欢迎光临朱凯的个人博客!
朱凯,mzetire.com

渐变进度条

 发布时间: 2019-01-14 14:39      原创:  朱凯      评论: .       .人查看

渐变进度条

整个动画效果主要可以分成3步骤:

1. 创建灰色进度条背景

bgLayer.frame = CGRectMake(0,0,self.width,self.height);
bgLayer.backgroundColor = ColorHEX(0xF5F5F5).CGColor;
bgLayer.masksToBounds = YES;
bgLayer.cornerRadius = self.height / 2;
[self.layer addSublayer:bgLayer];

2. 创建 CAGradientLayer 渐变效果的Layer

self.gradientLayer =  [CAGradientLayer layer];
self.gradientLayer.frame = bgLayer.frame;
self.gradientLayer.masksToBounds = YES;
self.gradientLayer.cornerRadius = self.height*0.5;
[self.gradientLayer setColors:self.colorArray];
[self.gradientLayer setLocations:self.colorLocationArray];
[self.gradientLayer setStartPoint:CGPointMake(0, 0)];
[self.gradientLayer setEndPoint:CGPointMake(1, 0)];
[self.layer addSublayer:self.gradientLayer];

3. 创建一个Mask Layer,并设置为CAGradientLayer渐变层的Mask 然后通过设置maskLayer 宽度来控制进度

self.maskLayer = [CALayer layer];
self.maskLayer.frame = CGRectMake(0,0,self.width*self.percent*0.01, self.height);
self.maskLayer.borderWidth = self.height*0.5;
[self.gradientLayer setMask:self.maskLayer];
//进度条动画
- (void)circleAnimation{
    [CATransaction begin];
    [CATransaction setDisableActions:NO];
    [CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseInEaseOut]];
    [CATransaction setAnimationDuration:3];
    self.maskLayer.frame = CGRectMake(0,0,self.width*self.percent*0.01, self.height);
    [CATransaction commit];
}

代码分享: 渐变进度条

密码: 5uej

分享是一种快乐,也是一种美德:
¥打开支付宝,扫码领红包¥ 红包

支付宝 aliPay

微信 wxPay