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