弧形渐变进度条

Demo

这个是效果图

我们来说说看这个怎么做出来吧!?

先介绍一下它的思路

想象背景是一个调色板,然后在调色板上面涂满了黑色,然后在黑色上面抠形状出来,那扣掉的部分,不就是渐变的了嘛!

实现一下吧

UIBezierPath *path;

这个当然是实现路径的

CALayer *gradientLayer;

这个是调色板

CAShapeLayer *progressLayer;

这个是抠掉的路径的图层

那么先说说渐变调色板是啥个思路吧

把调色板切成左右两份儿,左边从红渐变到黄再到绿(左下到右上);右边的从绿渐变到蓝再到紫(左上到右下)

设置完毕颜色之后,加个蒙版,就可以实现抠图的效果了

[gradientLayer setMask:progressLayer];

设置一下抠图路径咯

progressLayer.path=path.CGPath;

那么咋个动起来呢?

噢对,加个计时器!我一开始也是这样想的,后面发现它的工作效率贼低贼低,所以就放弃了,转而使用CATransaction,它在动起来的时候,CPU竟然没有动!!而如果使用NSTimer的话,那动画帧数越高,动画效果越好,CPU飚的越高

[CATransaction begin];
[CATransaction setDisableActions:!(animate&&enableAnimate)];
[CATransaction setAnimationTimingFunction:[CAMediaTimingFunction functionWithName:kCAMediaTimingFunctionEaseIn]];
[CATransaction setAnimationDuration:time];
progressLayer.strokeEnd=data/(max-min);
[CATransaction commit];

最后说一句

讲这些是为了宣传开源库的~

因为这个开源库被部署在了cocoaPod上面,用起来还是蛮方便的

Github Link

CocoaPod Link

喜欢的话点个赞也不错~