iOS开发之百度外卖APP个人中心头像<浪>起来的动画效果

   <p>作为一个中午下班不肯离开工作岗位且勤奋工作的骚年来说,叫外卖就成了不可或缺的习惯.某日瞬间发现百度外卖的APP波浪效果很是吸引人.相比较其他的外卖APP,颜值略高些.(淘宝也有波浪的效果),遂就思考如何实现这种”浪”的效果.</p>    <h2><strong>效果演示</strong></h2>    <p>百度外卖 波浪效果图:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/38850deadc9041bd36cb1ebbf0e06317.gif"></p>    <h2><strong>你需要知道的</strong></h2>    <h2><strong>CADisplayLink</strong></h2>    <p>简单的说就是一定时器,其根本利用刷帧和屏幕频率一样来重绘渲染页面. 其创建方式:</p>    <pre>  <code class="language-objectivec">CADisplayLink *timer = [CADisplayLink displayLinkWithTarget:self selector:@selector(wave)];  [timer addToRunLoop:[NSRunLoop currentRunLoop] forMode:NSRunLoopCommonModes];</code></pre>    <h2><strong>CAShapeLayer</strong></h2>    <p>CALayer的子类,通常结合CGPath来绘制图形.</p>    <p>其创建方式:</p>    <pre>  <code class="language-objectivec">CAShapeLayer *Layer = [CAShapeLayer layer];  Layer.frame =  self.bounds;  Layer.fillColor = self.realWaveColor.CGColor;  Layer...等属性  [self.view.layer addSublayer:Layer];</code></pre>    <h3>其优点</h3>    <ul>     <li> <p>渲染效率高渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。</p> </li>     <li> <p>高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。</p> </li>     <li> <p>不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。</p> </li>     <li> <p>不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。</p> </li>    </ul>    <h2><strong>三角函数</strong></h2>    <p><img src="https://simg.open-open.com/show/5b1946b105b88e20c4ccb081cd0bd47f.png"></p>    <p><img src="https://simg.open-open.com/show/53e53c5cb56d8e5f076e46a51a46bd09.png"></p>    <h2>思路实现</h2>    <pre>  <code class="language-objectivec">UIView –> 2个CAShapeLayer –> imageView.frame.orgin.y调整</code></pre>    <h2><strong>主要代码实现</strong></h2>    <h3>属性方法</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/e8339c844d28b65cb793a4341a70dcb2.png"></p>    <h3>实现</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/ca2b18f7b0a2c45953d46d8c0999e3f7.png"></p>    <h3>调用</h3>    <p style="text-align:center"><img src="https://simg.open-open.com/show/37dec661208e44c28385338e512fded0.png"></p>    <h3>终</h3>    <p>最后效果:</p>    <p style="text-align:center"><img src="https://simg.open-open.com/show/3e1de01e9199e77702f1a37d85e7f786.gif"></p>    <p> </p>    <p> </p>    <p>来自：http://allluckly.cn/投稿/tougao58</p>    <p> </p>