d3.js - 用单行重新创建矩形波动画

Question

我有一个由许多 5px 宽的矩形组成的动画。

https://codepen.io/guanzo/pen/rmGqNP

您可以看到它表现出类似波浪的行为。这告诉我必须有一种方法用一条曲线而不是数百个矩形来表示这种运动。最有可能使用像 <path> 这样的 svg 元素或<polyline> ？我想我需要使用一些修改后的正弦波函数，但我无法理解数学。

编辑: 设法得到了polyline通过cubicInOut 缓动上下移动。

https://codepen.io/guanzo/pen/vmeoXw

仍然不知道如何对类似波浪的行为进行编程。

编辑: 我尝试使用 path和贝塞尔曲线过渡。关闭，但没有雪茄。

https://codepen.io/guanzo/pen/XRevME?editors=1010

Answer 1

对整条线应用线性变换，而不是对线的控制点进行动画处理，会更容易。这是一个简单的例子:

<svg width="100%" viewBox="0 0 100 40">
  <rect x="0" y="0" width="100" height="40" fill="#fa0" stroke="none"/>
  <path d="M0 0V10H0C20 10 50 30 80 30H120C150 30 150 10 180 10 H220C250 10 250 30 280 30H320C350 30 350 10 380 10H400V-10Z" fill="#c00" stroke="none">
    <animateTransform attributeName="transform" attributeType="XML" type="translate" from="-300 0" to="-100 0" dur="5s" repeatCount="indefinite"/>
  </path>
</svg>