前言:
在多次地方我看到一个非常好看的线条动画-波浪。给人很舒服的赶脚,并且也很实用在项目中,比如:下载文件进度,清理缓存,量表等等。。为此,我也写了一片文章来去讲述该波浪动画如何去实现的,并在此基础上拓展。
先上个y=Asin(ωx+φ)+h各参数变化的效果图:
通过上面的效果可以看出,影响波浪的高度只有一个参数h,影响波浪的速度只有一个参数φ,影响波浪的波长有两个参数ω和A。
具体代码github
分析:
看着波浪动画,形状能想到就是正弦或余弦函数。
要如何去实现这样一个正弦曲线呢。用贝塞尔画曲线?这是不可能的,所以,能想到的就是通过x坐标来一一算出对应的y,然后连起来,就是个正弦曲线。
我们知道了要用到正弦函数的知识,那么再思考下,到底是怎么才能达到波浪形态呢?。。下面我给个图,大家可以通过这个图来脑补下。
要形成波浪,应该就是ω系数随着计时器不断累加
在这里我就不再讲解了,来点实用的。
效果图:
波浪如何去实现,我就不多讲了,主要说的是如何填充这个圆,在这里我采取的是CoreGraphics知识去实现的,不太清楚CoreGraphics框架知识的可以先去了解下
之后,我采取CADisplayLink来实现定时器,用NSTimer可能会使得动画不够流畅。(我比较懒得去自己设置时间罢了,CADisplayLink每秒刷60帧完全够了)。