在 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 and 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 values 是介于 0 和 1 之间的浮点值，表示持续时间的比例。每个连续的时间必须大于或等于前面的时间值。对于连续动画，第一个时间值必须为0，最后一个为1。

在 smil animateTransform 中对关键帧进行动画处理

animate keyframes inside smil animateTransform

animation

svg

smil