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