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

这是一个网上出过文章的例子,很多人都写过,但是大都是拷贝一个人作者的原文,这篇文章主要的目的是为了细致解析效果实现的关键点,以及提供有详细注释的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
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容