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

这是一个网上出过文章的例子,很多人都写过,但是大都是拷贝一个人作者的原文,这篇文章主要的目的是为了细致解析效果实现的关键点,以及提供有详细注释的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效果如下:

绘图-类似百度外卖波浪效果的实现与关键点解析_第1张图片
舟行碧波上.gif

你可能感兴趣的:(绘图-类似百度外卖波浪效果的实现与关键点解析)