ios - 如何以与 Siri 显示的波浪状效果相同的方式为线条设置动画？

Question

我想创建这个声音/正弦波，它看起来像 iOS 7 中的动态音频波 Siri 有：

我知道如何创建 UIBezierCurve sin 形状并为其设置动画，我搜索了很多，但我没有找到也不知道如何实现这种效果。

这条线开始是平的，而不是波浪，结束是平的。我没有使用任何声音文件，只要随机挥动的效果就足够了。

score 13 · Accepted Answer

也许您可以尝试基于 OSX 的 SISinusWaveView 的 SCSiriWaveformView 的 iOS 库：

score 3 · Accepted Answer

我认为使用单个贝塞尔曲线很难做到这一点，使用 NURBS 或 B 样条曲线可能会更好。

对于您显示的示例图像，您可以在立方体上使用 7 个控制点来完成。
可能是一个均匀的立方体，具有钳位/贝塞尔末端条件。换句话说，节点向量将是 (0, 0, 0, 1, 2, 3, 4, 4, 4)。

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

P0 和 P6 将是曲线的端点。

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

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 样条实现可供使用。如果没有可用的，好消息是 NURBS 曲线可以分解为贝塞尔曲线。对于像这样的简单示例，可以硬编码从 NURBS 到 Bezier 的转换，而无需实现完整的库。

score 1 · Accepted Answer

我是在 SwiftUI 中实现的，但算法并没有太大的不同。

3 回答 3