iOS开源：DoubleWavesAnimation - 双波浪动画

   <p>类似淘宝个人信息状态栏,京东金融等双波浪动画</p>    <p>主要方法:通过自定义View,利用正弦函数与余弦函数的效果.</p>    <p><strong>一.相关概念解释</strong></p>    <p>正弦函数: y =Asin（ωx+φ）+C</p>    <p>A 表示振幅，也就是使用这个变量来调整波浪的高度</p>    <p>ω表示周期，也就是使用这个变量来调整在屏幕内显示的波浪的数量</p>    <p>φ表示波浪横向的偏移，也就是使用这个变量来调整波浪的流动</p>    <p>C表示波浪纵向的位置，也就是使用这个变量来调整波浪在屏幕中竖直的位置。</p>    <p>(1)利用CADisplayLink,进行UI的刷新.</p>    <pre>  <code class="language-objectivec">@property (nonatomic,strong)CADisplayLink *wavesDisplayLink;  @property (nonatomic,strong)CAShapeLayer *firstWavesLayer;  </code></pre>    <p>iOS设备的屏幕刷新频率(FPS)是60Hz，因此CADisplayLink的selector 默认调用周期是每秒60次，这个周期可以通过frameInterval属性设置， CADisplayLink的selector每秒调用次数=60/ frameInterval。</p>    <p>比如当 frameInterval设为2，每秒调用就变成30次。</p>    <p>关于CADisplayLink ,此处用NSTimer亦可.</p>    <p>(2)CAShapeLayer</p>    <p>CAShapeLayer 的对象是一个本身没有形状，他的形状来源于你给定的Path，它依附于path,所以必须给定path，即使path不完整也会自动收尾相接，strokeStart以及stroleEnd代表着这个path中所占的百分比（可以使用storkeStart和stroleEnd来做曲线进度的动画).</p>    <p><strong>二.主要代码</strong></p>    <p>(1)正弦与余弦函数</p>    <pre>  <code class="language-objectivec">//创建一个路径  CGMutablePathRefpath = CGPathCreateMutable();  CGFloat y = currentK;  //将点移动到 x=0,y=currentK的位置  CGPathMoveToPoint(path, nil, 0, y);  for (NSInteger i =0.0f; i  </code></pre>    <p><strong>三.相关效果</strong></p>    <p>1.正弦函数与余弦函数: <strong>相同速度/振幅/周期/非震荡效果</strong></p>    <p><img src="https://simg.open-open.com/show/2ec333db39583327175cf7b0cc68e90b.gif"></p>    <p style="text-align:center">相同速度:振幅:周期:非震荡.gif</p>    <p>2.正弦函数与余弦函数: 相同速度/振幅/周期/震荡效果*,这就类似淘宝个人信息状态栏,余弦函数中加π/2即是峰顶与峰底对应效果</p>    <p><img src="https://simg.open-open.com/show/ac9860b35f8fbf1bb7a6106b215a5f52.gif"></p>    <p style="text-align:center">相同速度:振幅:周期:震荡.gif</p>    <p>当速度/振幅/周期等改变时,会产生更多的效果:</p>    <p>3.正弦函数与余弦函数: 不同速度/振幅,相同周期/非震荡效果,这个效果用起来也很不错</p>    <p>此处设置为: 正弦与余弦函数参数不相同时,会产生交错效果;此处自行尝试更改即可产生不同动画效果.</p>    <pre>  <code class="language-objectivec">正弦函数:   //设置波浪流动速度  wavesSpeed = 0.02;  //设置振幅  waveA = 12;  //设置周期  waveW = 0.5/30.0     余弦函数:   //设置波浪流动速度  wavesSpeed = 0.04;  //设置振幅  waveA = 13;  //设置周期  waveW = 0.5/30.0;  </code></pre>    <p><img src="https://simg.open-open.com/show/4610a84db44f2d3ebdb6c413738c08e8.gif"></p>    <p style="text-align:center">不同速度:振幅,相同周期非震荡.gif</p>    <p>4.正弦函数与余弦函数: <strong> </strong></p>    <p>不同速度/振幅,相同周期/震荡效果</p>    <p><img src="https://simg.open-open.com/show/145d7ac6dd4071b17d0630c8226d0854.gif"></p>    <p style="text-align:center">不同速度:振幅,相同周期:震荡.gif</p>    <p>5.正弦函数与余弦函数: 不同速度/振幅,相同周期/,峰顶与峰底对应效果,可自行开启震荡</p>    <p>更改余弦函数公式为:</p>    <pre>  <code class="language-objectivec">//如果需要正弦函数的峰顶和余弦函数的峰底对应,可以替换成下方公式均可  //y = waveA * cos(waveW*i + offsetX+M_PI_2)+currentK;    //y = waveA * sin(-(waveW*i + offsetX))+currentK;  </code></pre>    <p><img src="https://simg.open-open.com/show/b38e8af9900932243d775d492b4039f4.gif"></p>    <p style="text-align:center">同速度:振幅:周期,峰顶与峰底对应.gif</p>    <p>6.正弦函数与余弦函数: <strong>如果需要让双波浪在屏幕下方显示</strong></p>    <p>更改代码为:</p>    <p>以第一个波浪为例,第二个同理更改就行.</p>    <pre>  <code class="language-objectivec">//第一个波浪  self.firstWare = [[FirstWavesalloc]initWithFrame:CGRectMake(0, self.view.frame.size.height-200, self.view.frame.size.width, 220)];     //波浪公式下方更改  CGPathAddLineToPoint(path, nil, WavesWidth, self.frame.size.height);  CGPathAddLineToPoint(path, nil, 0, self.frame.size.height);  </code></pre>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e7f120ad8aa883553afd672d4fec33c6.png"></p>    <p style="text-align:center">屏幕下方显示.png</p>    <p><strong>四.参考资料</strong></p>    <p>1. <a href="/misc/goto?guid=4959729611114181277" rel="nofollow,noindex">http://blog.csdn.net/u010123208/article/details/51227035</a></p>    <p>2. <a href="/misc/goto?guid=4959729611220711803" rel="nofollow,noindex">http://www.tuicool.com/articles/meMVR3</a></p>    <p> </p>