当前位置： 移动技术网 > 移动技术>移动开发>IOS > iOS CAShapeLayer、CADisplayLink 实现波浪动画效果

iOS CAShapeLayer、CADisplayLink 实现波浪动画效果

2018年12月26日  | 移动技术网移动技术  | 我要评论

可以自定义波浪高度、宽度、速度、方向、渐变速度、水的深度等参数。

实现原理

波浪的形状绘制在 cashapelayer 上。通过 cadisplaylink 与屏幕刷新频率同步，每次刷新都绘制新的波浪，并改变小船的位置和角度。另外，水和天空的颜色是渐变的，由 cagradientlayer 实现，其中，显示水的 cagradientlayer 需要有波浪形状的 cashapelayer 的遮罩(mask)。

\

效果图

cashapelayer

cashapelayer 的属性 path (cgpath)就是图层要显示的形状。把波浪的形状绘制出来，赋值给此属性即可。

cadisplaylink

创建 cadisplaylink，相应的 target 实现屏幕刷新时要调用的方法。把 cadisplaylink 加入 runloop 中。通过 ispaused 属性控制 cadisplaylink 是否暂停(target 是否调用方法)

private var wavelink: cadisplaylink?

wavelink = cadisplaylink(target: self, selector: #selector(wavelinkrefresh))

wavelink?.ispaused = true

wavelink?.add(to: .current, formode: .defaultrunloopmode)

绘制波浪

波浪的形状关键是正弦函数曲线

y = a * sin(x + b)

参数 a 决定了波浪的高度;参数 b 决定了波浪在 x 轴的位置。

用一个属性 currentphase 表示参数 b

private var currentphase: cgfloat = 0

每次屏幕刷新的时候用 currentphase 绘制，然后更新此属性，加上一个固定的数。这样波浪就会朝左或右匀速移动。

为了使波浪高度逐渐变化，用一个属性表示参数 a，然后每次绘制后更新此属性，加上一个固定的数，直到波浪高度达到目标值。

小船的位置和旋转角度

已知小船 x 轴坐标，通过正弦函数可以直接计算出小船的 y 轴坐标。此外，小船需要随着波浪旋转，旋转至船底与波浪表面相切。这就要对正弦函数进行求导

y' = a * cos(x + b)

用以上式子计算出小船所在位置的 y'，表示正弦函数在此处的切线斜率，几何意义是切线与 x 轴的夹角的正切值。反正切即可求出切线与 x 轴的夹角，也就是小船需要旋转的角度

angle = atan(y')

用以上旋转角度，改变小船视图(uiview)的 transform，调用 cgaffinetransform 的 rotated(by:) 方法，实现小船的旋转。

cagradientlayer

cagradientlayer 默认的颜色渐变方向是由上至下。给 colors 属性赋值一个包含 cgcolor 的数组，则图层颜色由上至下，从数组第一个值经中间值渐变至最后一个值。

显示水的 cagradientlayer 需要呈现波浪形状，需要 cashapelayer 的遮罩。把绘制好波浪形状的 cashapelayer 赋值给 cagradientlayer 的 mask 属性即可。

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网