Question

我正在尝试确定如何有效地反转使用animateMotion元素上的d和path属性的SVG动画（使用SMIL）。我需要动画在形状周围逆时针运行。

可以找到当前动画here，相关代码如下。

＆＃13;

document.getElementById("svgobject").pauseAnimations();

＆＃13;

<svg version="1.1" id="svgobject" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="451.5px" height="451.5px" viewBox="0 0 461.5 461.5" enable-background="new 0 0 461.5 461.5" xml:space="preserve">
  <g>
    <path fill="none" stroke="black"
          d="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"/>
    <rect id="rect" x="0" y="0" width="50" height="20" fill="gray" stroke="black" stroke-width="1" transform="translate(-25, -10)">
      <animateMotion path="M446.85,280.187c0,30.296-24.56,54.854-54.854,54.854H60.239c-30.296,0-54.854-24.559-54.854-54.854l0,0c0-30.296,24.559-54.854,54.854-54.854h331.756C422.29,225.333,446.85,249.891,446.85,280.187L446.85,280.187z"
        begin= "0s" dur="2s" repeatCount="1" rotate="auto" fill="freeze" />
    </rect>
  </g>

  <!--start and stop animation-->
  <g onclick="document.getElementById('svgobject').unpauseAnimations()"
     transform="translate(160 100)">
    <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
    <text style="font: 16px Arial Black; fill: white; stroke: black;"
          transform="translate(2 20)">START</text>
  </g>
  <g onclick="document.getElementById('svgobject').pauseAnimations()"
     transform="translate(260 100)">
    <rect width="60" height="30" rx="10" stroke="black" fill-opacity="0.2"/>
    <text style="font: 16px Arial Black; fill: white; stroke: black;"
          transform="translate(5 20)">STOP</text>
  </g>
</svg>

＆＃13;

据我所知，我可以手动反转SVG路径数据命令，包括moveto（M，m），lineto（L，l），curveto（C，c）等。

考虑到我需要反转的路径坐标的数量（除了这个动画中的那些），我试图确定是否有更有效的方法来执行此操作。

Answer 1

您可以使用keyPoints和keyTimes属性来反转动画的方向。

<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
               fill="freeze" keyPoints="1;0" keyTimes="0;1">

这里我们告诉运动从1（路径的末端）到0（路径的开始）。

这适用于Firefox，但遗憾的是不适用于Chrome。 Chrome似乎被窃听了。

<强>更新

我发现与此相关的Chrome错误：https://code.google.com/p/chromium/issues/detail?id=353108

如果calcMode是“节奏”（它默认为），似乎keyTimes被破坏了。如果您将其更改为其他内容，例如“线性：动画也可以在Chrome中正常运行。

<animateMotion path="..." begin= "0s" dur="2s" repeatCount="1" rotate="auto"
               fill="freeze" keyPoints="1;0" keyTimes="0;1" calcMode="linear">

Demo here

Updated Codepen here

如何在运动路径上有效地反转SVG（SMIL）动画？

1 个答案: