绘图－类似百度外卖波浪效果的实现与关键点解析

这是一个网上出过文章的例子，很多人都写过，但是大都是拷贝一个人作者的原文，这篇文章主要的目的是为了细致解析效果实现的关键点，以及提供有详细注释的Dome。给有需要的朋友提供思路。

实现的技术关键点：

• CADisplayLink是图层框架 Quartz Core 中的一个类，可以把它理解为一个定时器。 CADisplayLink可以确保系统渲染每一帧的时候我们的方法都被调用，从而保证了动画的流畅性. CADisplayLink 默认每秒运行60次，将它的frameInterval属性设置为2，意味CADisplayLink每隔一帧运行一次，变为每秒运行30次, 使用场合相对专一，适合做UI的不停重绘，比如自定义动画引擎或者视频播放的渲染。不需要在格外关心屏幕的刷新频率了，本身就是跟屏幕刷新同步的。

选择CAShapeLayer 的原因：

• 渲染效率高渲染快速。CAShapeLayer使用了硬件加速，绘制同一图形会比用Core Graphics快很多。
• 高效使用内存。一个CAShapeLayer不需要像普通CALayer一样创建一个寄宿图形，所以无论有多大，都不会占用太多的内存。
• 不会被图层边界剪裁掉。一个CAShapeLayer可以在边界之外绘制。你的图层路径不会像在使用Core Graphics的普通CALayer一样被剪裁掉。
• 不会出现像素化。当你给CAShapeLayer做3D变换时，它不像一个有寄宿图的普通图层一样变得像素化。

CADisplayLink 了解更多

实现的主要过程：

• 使用CADisplayLink 注册定时器
• 创建两个图层，一个为前面的实浪图层，一个为后面的遮罩浪图层。设置两个图层的大小相同，高度都是一个浪的高度
• 在定时器的绑定方法中 使用 正弦曲线函数和for 方法绘制路径
• 把绘制好的路径分别赋给两个图层。
• 设定好“船”的 y坐标。
• 随着定时器的每次调用就会出现想要的波浪效果。

dome效果如下：

舟行碧波上.gif