好玩的进度条动画

基于瓜神发给我一个非常好玩的下载进度条动画，我也去尝试去实现，主要是运用到的技术：核心动画(Core Animation)，贝塞尔曲线(UIBezierPath)，正弦函数(y=Asin（ωx+φ）+h)。

效果图：

首先：我们先绘制最开始的图形。

因为考虑到，竖线和倒三角会做动画，为此这里应该2个layer，1个view作为圆环。即

@property (nonatomic,strong) CAShapeLayer *lineShapeLayer;//竖线

@property (nonatomic,strong) CAShapeLayer *curveShapeLayer;//曲线

竖线和曲线的路径path都是通过贝塞尔来绘制，并通过核心动画，以及传入贝塞尔曲线的参数值的改变来实现动画效果。

需要准备下面的贝塞尔曲线作为做动画所需.

接下来就是开始做动画

两个动画的间隔我这里利用NSTimer去处理。当然，也可以用GCD来处理。

[NSTimer scheduledTimerWithTimeInterval:0.65 target:self selector:@selector(doCureAnimation) userInfo:nil repeats:NO];

接下来就是处理波浪动画、圆环填充、百分比显示。

需要的声明一个波浪layer，圆环路径layer，百分比显示label。

@property (nonatomic,strong) CAShapeLayer *waveShapeLayer;//波浪线

@property (nonatomic,strong) CAShapeLayer *cicleShapeLayer;//圆环路径

@property (nonatomic,strong) UILabel *progressLabel;//进度显示

绘制一个波浪的原理，在这里我就不解释了，想了解的可以看我上一篇文章《波浪动画》里有详细解释其原理，以及绘制。

初始化控件

需要准备圆环路径贝塞尔曲线,默认从-M_PI/2(圆顶部）,要逆时针画圆，结束角度应该为-2*M_PI-M_PI/2 , clockwise==NO

绘制波浪

再申明一个NStimer计时器用来圆环填充，并且判断是否填充完毕，如果没有填充完毕，那么判断在小于70%，波浪的波峰和波速默认不变，在大于70%，波浪的波峰和波速不断递减，直至0。

百分比显示label默认为缩放为0，当执行完变宽动画将去执行缩放动画，默认为缩放1.0，我采取使用NSTimer来过渡，具体代码可在demo里查看。

最后，就是下载完毕后，变成勾勾动画。。

需要做的准备工作：

申明一个CAShapeLayer ：

@property (nonatomic,strong) CAShapeLayer *successShapeLayer;//下载成功

贝塞尔曲线：

初始化：

调取动画：（只需要在计时器里_progress>1.0里调取)

源码地址github

总结：一个会懂设计的程序员很可怕。