Question

我有这个由5px宽的矩形组成的动画。

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

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

编辑：使用cubicInOut缓和来管理polyline上下移动。

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

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

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

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

Answer 1

不是为线条的控制点设置动画，而是将线性变换应用于整个线条会更容易。这是一个简单的例子：

＆＃13;

<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>

＆＃13;

使用单行重新创建矩形波动画

1 个答案: