SVG SMIL animateTransform 缓动效果

Question

我正在尝试为简单的SVG SMIL动画添加时间函数。显然可以使用keySplines属性设置时序/缓动，然而在我的例子中它无效：

<svg xmlns="http://www.w3.org/2000/svg" width="214" height="214" viewBox="0 0 24 24">

    <rect style="fill:#000;" width="4" height="4" x="3" y="11">
        <animateTransform attributeName="transform" 
        begin="0s" dur="2s" type="translate" from="0 0" to="40 0" repeatCount="4" fill="freeze"
        calcMode="spline"
        keySplines="0.4, 0, 0.2, 1"/>
    </rect>

    <rect style="fill:#ff0000;" width="4" height="4" x="3" y="16">
        <animateTransform attributeName="transform" 
        begin="0s" dur="2s" type="translate" from="0 0" to="40 0" repeatCount="4" fill="freeze" />
    </rect>

</svg>

这里有一个演示：http://jsfiddle.net/q4e4049s/，黑色的应该具有缓动功能。

- Mircea

---

在 Firefox 上看起来对我来说没问题。 - Robert Longson

如果添加 keyTimes="0;1"，它就能正常工作，本质上你依赖于一个隐式的 keyTimes，如果不添加它，这似乎对我来说也没问题。在我看来，SVG规范并没有完全明确，在这种情况下是否应该使用隐式的 keyTimes。 - Erik Dahlström

@ErikDahlström 确实在 Chrome 中有效。谢谢。 - Mircea

这个问题之前已经有人报告过了，http://crbug.com/101374。 - Erik Dahlström

我也提交了一个错误报告，我猜我应该关闭那个。 - Mircea

Answer 1

<svg xmlns="http://www.w3.org/2000/svg" width="100%" viewBox="0 0 50 14">
    <rect fill="black" width="6" height="6" x="3" y="0">
        <animateTransform attributeName="transform" 
                          begin="0s"
                          dur="2s"
                          type="translate"
                          from="0 0"
                          to="40 0"
                          repeatCount="4"
                          fill="freeze"
                          calcMode="spline"
                          keySplines="0.4 0 0.2 1; 0.4 0 0.2 1"
                          values="0;30;0"/>
    </rect>
    <rect fill="red" width="6" height="6" x="3" y="7">
        <animateTransform attributeName="transform"
                          begin="0s"
                          dur="2s"
                          type="translate"
                          from="0 0"
                          to="40 0"
                          repeatCount="4"
                          fill="freeze"/>
    </rect>
</svg>

- Angelo Lucas

---

什么是 values="0;30;0"？ - Necktwi

@Necktwi中的“values”类似于“from”和“to”，但它更加灵活，因为您可以拥有多个关键帧。例如，在这里，您可以从“0”到“30”，然后返回到“0”。这是仅使用“from/to”不可能实现的。 - Mig

你能解释一下吗？ - Sam

当您添加value属性时，from和to实际上被忽略了，甚至不需要在其中。此外，如果您还想将垂直动画添加到其中，可以为每个值添加“Y”值，如values="0 0;30 30;0 0"。 - Captain Fantastic

每个控制点描述都是一组四个值：x1 y1 x2 y2，描述了一个时间段的贝塞尔控制点。定义相关段的keyTimes值是贝塞尔“锚点”，而keySplines值则是控制点。因此，控制点的数量必须比keyTimes少一个。x1 y1 x2 y2的值必须都在0到1的范围内。如果动画的持续时间不确定，则任何keyTimes规范都将被忽略。 keySplines description - Captain Fantastic