4

您可以无限制地停止和重复动画，但如果您重新启动一个不确定的动画，它将失去其累积值并从初始值开始。

也许我应该举个例子来澄清一下；看这个动画：

  <animate id="main"
    attributeName="transform" attributeType="XML"
    begin="startbox.click" dur="1s" end="endbox.click"
    from="rotate(0)" to="rotate(360)"
    additive="sum"
    accumulate="sum"
    fill="freeze"
    repeatCount="indefinite"
  />

如果我停止这个动画，并开始一个不同的（比如id="second"）影响同一个对象的旋转，second将从停止的点完美地继续main。但是，如果我通过单击startbox（或实际上通过任何其他事件）开始这个，它将减去所有差异main并在开始之前重置旋转。

我想要的是一个适当的“暂停”，我可以在动画之前停止的地方继续。当然，我可以添加固定数量的相同动画和相同数量的相同开始/停止按钮来模拟效果，但这不是一个好的解决方案。特别是因为暂停的次数是有限的。

整个例子（似乎只在 Opera 中工作）

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" 
  "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg
     xmlns="http://www.w3.org/2000/svg" version="1.1"
     xmlns:xlink="http://www.w3.org/1999/xlink">
  <desc>Click example</desc>
  <g>
    <rect id="startbox"
      x="10" y="10"
      width="20" height="20"
      stroke="none" fill="green"
    />
    <rect id="endbox"
      x="10" y="40"
      width="20" height="20"
      stroke="none" fill="red"
    />
    <g transform="translate(200,200)">
    <rect
      x="0" y="0"
      width="50" height="5"
      stroke="#10e9f3" fill="#30ffd0"
    >
      <animate
        attributeName="transform" attributeType="XML"
        begin="startbox.click" dur="1s" end="endbox.click"
        from="rotate(0)" to="rotate(360)"
        additive="sum"
        accumulate="sum"
        fill="freeze"
        repeatCount="indefinite"
      />
    </rect>
    </g>
  </g>
</svg>

4

2 回答 2

13

它内置在 SVG 中

 SVGRoot.pauseAnimations();
于 2014-10-13T21:38:36.223 回答
5

使用 animate 元素对变换进行动画处理是无效的，您必须使用 animateTransform。见http://www.w3.org/TR/SVG/animate.html#AnimationAttributesAndProperties

如果您的测试用例使用该 UA 进行动画处理，您应该向 Opera 报告您的测试用例。

  <animateTransform
    attributeName="transform" attributeType="XML"
    type="rotate"
    begin="startbox.click" dur="1s" end="endbox.click"
    from="0" to="360"
    additive="sum"
    accumulate="sum"
    fill="freeze"
    repeatCount="indefinite"
  />

至于提出的问题，您可以使用 javascript 暂停动画，但据我所知，使用 SVG 1.1 您不能以声明方式执行此操作。

于 2012-10-02T16:34:50.820 回答