1

在 keySplines 的情况下，SVG 动画似乎存在问题。我正在使用谷歌浏览器 v46.0

svg代码，

<svg xmlns="http://www.w3.org/2000/svg" width="1000" height="1000" viewBox="0 0 1000 1000" style="background:#141313">
  <g>
    <animateMotion path="M125,95 C158.33,95 258.33,95 325,95  C391.66,95 491.66,95 525,95 " calcMode="spline" begin="0s" dur="10s" keyTimes="0;0.50;1" keySplines="0 1 0 1 ;0 0 1 1 " fill="freeze" />
    <path d="M75,-75 C75,-75 75,75 75,75 C75,75 -75,75 -75,75 C-75,75 -75,-75 -75,-75 C-75,-75 75,-75 75,-75 " stroke="#ffffff" stroke-width="2" stroke-opacity="1" fill="#ff0000" fill-opacity="1">
    </path>
  </g>
  <!-- the path defnined in the above animatemotion tag broken into component paths and visualized for reference -->
  <path d="M125,95 C158.33,95 258.33,95 325,95 " stroke="#ffffff" stroke-width="2" stroke-opacity="1" fill-opacity="0" />
  <path d="M325,95 C391.66,95 491.66,95 525,95 " stroke="#ffff00" stroke-width="2" stroke-opacity="1" fill-opacity="0" />
</svg>

如您所见，它是一个简单的矩形动画，它沿着标记中定义的路径进行动画处理，其中定义了 2 段 keySplines，其中第 1 段 0 1 0 1 是非线性的，而第二段 0 0 1 1 给出线性插值。我已经可视化了路径，它是一条白色和黄色的直线，分别表示第一段和第二段。

对于第一段，矩形应该从白线的起点到白线的终点（作为其中心）。对于第二段，它应该从黄线的起点到黄线的终点（作为其中心）。

但在这种情况下并没有发生这种情况。当我将第一段 keySpline 从 0 1 0 1 更改为 0 0 1 1 时，动画按预期运行。

我在某个地方出错了还是这可能是 chrome 中的错误？

谢谢 ！

4

0 回答 0