UIBezierPath、CADisplayLink实现波浪动画

本文介绍了如何使用UIBezierPath结合正弦函数sinf生成点,通过CADisplayLink不停改变参数来实现波浪动画效果。虽然UIBezierPath通常限制在两个controlPoint,但可以通过自定义addLine添加点来绘制多个周期的波浪。最终展示了一个流畅的波浪动画,并提供了GitHub上的demo源码链接。
摘要由CSDN通过智能技术生成

最近使用频繁的CAShaperLayer、CABasicAnimation、CAKeyframeAnimation,突然想实现一个以前APP中波浪线,效果如下:


这里写图片描述

    开始的调查发现,核心在于使用正弦函数sinf生成点,但是没有想到使用CGMutablePathRef以点划线,然后通过不停的改变sinf中的参数以及结果,来实现动画的效果。

我使用了UIBezierPath,但是常规的UIBezierPath只有最多两个controlPoint,例如下面:

path.move(to: _point)
path.addCurve(to: _point1, controlPoint1: con1, controlPoint2: con2)

那么也就能画出一个周期:
这里写图片描述

看来不能用现成的方法,那么UIBezierPath能不能自己addLine加点呢?我当时贱贱的想,其实是可以的,话不多说,上代码

在新建的WaveView.m中

override func draw(_ rect: CGRect) {
    // layer
    backg = CAShapeLayer()
    backg.lineWidth   = 1
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值