如何以与Siri显示的波浪效果相同的方式为线条制作动画？

Question

我想创建一个看起来像iOS 7中的动态音频波Siri的声音/ sin波：

我知道如何创建和动画UIBezierCurve的形状和我google了很多，但我没有找到并且不知道如何实现这种效果。

线条开始平坦，而不是波浪并且平坦。我不打算用任何声音文件，只是随机挥动的效果就足够了。

Answer 1

也许你可以尝试使用SCSiriWaveformView的iOS库，基于OSX的SISinusWaveView：

https://github.com/stefanceriu/SCSiriWaveformView

Answer 2

我认为使用单个Bezier曲线进行此操作非常困难，使用NURBS或B样条曲线可能更好。

对于您显示的示例图像，您可以使用立方体上的7个控制点来执行此操作 可能是均匀的立方体，具有夹紧/贝塞尔末端条件。换句话说，结矢量将是（0,0,0,1,2,3,4,4,4）。

为了描述控制点位置，我们称之为P0..P6。

P0和P6将是曲线的终点。

P2..P4在P0和P6之间的X中等间隔。也就是说，P2将是1/4，P2将是2/4，而P3将是P维和P6之间的3/4，在X维度。

P1会保持曲线直接偏离侧面。 P1的Y值应始终与P0的Y值相同。 P1的X值应为P0和P2之间的1/3。

P5类似于P1，Y值与P6相同，X值是P6和P5之间的1/3。

然后只需为P2..P4的Y值设置动画，你就会得到一条直线末端的弹性线。

我不确定iOS是否可以使用NURBS或B-spline实现。如果没有可用的，好消息是NURBS曲线可以分解为贝塞尔曲线。对于像这样的简单示例，可以硬编码从NURBS到Bezier的转换，而无需实现完整的库。

Answer 3

我是在 SwiftUI 中实现的，但算法差别不大。

https://github.com/nilotic/SiriWave