smil animateTransform中的动画关键帧

Question

我目前正在使用animateTransform制作一个动画

<animateTransform xmlns="http://www.w3.org/2000/svg" attributeName="transform" type="scale" additive="sum" begin="mouseenter" from="1" to="1.2" dur="1" />

到目前为止，这还不错，但是缺少一件事，我想要创建一个平滑的动画，所以开始应该匹配端点。不幸的是，我无法找到设置多个关键帧的方法。

在css中，它将如下所示

@keyframe foo {
  0%{
    transform: scale(1);
  }
  50%{
    transform: scale(1.2);
  }
  100%{
    transform: scale(1);
  }
}

有什么想法吗?如何在svg/ animateTransform标记中创建这样的动画？

Answer 1

在SMIL语法中，CSS关键帧语法的对应项是使用包含分号分隔列表的values和keyTimes属性：

<animateTransform xmlns="http://www.w3.org/2000/svg"
    attributeName="transform" type="scale" additive="sum"
    begin="mouseenter" dur="1"
    values="1;1.2;1" keyTimes="0;0.5;1 />

from/to和values的使用是相互排斥的。

这两个列表必须有完全相同的项目数。keyTime值是0到1之间的浮点值，表示持续时间的比例。每个连续的时间必须大于或等于前一个时间值。对于连续动画，第一次值必须是0，最后一次值必须是1。