好玩的进度条动画
基于瓜神发给我一个非常好玩的下载进度条动画,我也去尝试去实现,主要是运用到的技术:核心动画(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