javascript - SVG动画有一个属性dur，但是有没有办法设置动画的速度呢？

Question

此 SVG 动画代码为每个矩形生成不同的速度。我需要相似的速度（不同的持续时间）。是否有一个我找不到的属性，或者一个简单的解决方案。

---

<animate attributeName="x" attributeType="XML" begin="0s" dur="10s" from="0" to="500" fill="freeze"/>

<animate attributeName="x" attributeType="XML" begin="0s" dur="10s" from="0" to="800" fill="freeze"/>

Answer 1

以下是设置速度动画的方法：

<animate attributeName="x" attributeType="XML" begin="0s" dur="10s" from="0" to="800" fill="freeze" calcMode="spline" keySplines="0 0 1 0" />

calcMode="spline"和keySplines="0 0 1 0"负责速度

在“手动模式”下设置正确的速度相当不方便。所以这个工具在帮助： http: //www.carto.net/svg/samples/keysplines.svg

Answer 2

不，SVG 动画是基于时间的。calcmode="paced" 您可能指的是简单的默认动画模式（与动画从开始到结束跳转的离散模式相比）。如果你想要一个 JavaScript 风格的“setInterval()”动画，你必须使用 JavaScript。