这是一个网上出过文章的例子,很多人都写过,但是大都是拷贝一个人作者的原文,这篇文章主要的目的是为了细致解析效果实现的关键点,以及提供有详细注释的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 注册定时器
- 创建两个图层,一个为前面的实浪图层,一个为后面的遮罩浪图层。设置两个图层的大小相同,高度都是一个浪的高度
- 在定时器的绑定方法中 使用 正弦曲线函数和for 方法绘制路径
- 把绘制好的路径分别赋给两个图层。
- 设定好“船”的 y坐标。
- 随着定时器的每次调用就会出现想要的波浪效果。
dome效果如下: