svg 动画可以在不丢失累积信息的情况下暂停吗? [英] Can svg animations be suspended without loosing accumulative information?

问题描述

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

也许我应该用一个例子来澄清；拿这个动画:

如果我停止这个动画，并开始一个不同的动画(比如 id=second")来影响同一个对象的旋转，second 将完美地从点 main 停止的地方.但是，如果我通过单击 startbox(或任何其他事件)来启动这个，它将减去 main 产生的所有差异并在开始之前重置旋转.

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

---

整个示例(似乎只适用于 Opera)

<?xml version="1.0" standalone="no"?><!DOCTYPE svg 公共-//W3C//DTD SVG 1.1//EN"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svgxmlns="http://www.w3.org/2000/svg" 版本="1.1"xmlns:xlink="http://www.w3.org/1999/xlink"><desc>点击示例</desc><g><rect id="startbox"x="10" y="10"宽度="20" 高度="20"中风=无"填充=绿色"/><rect id="endbox"x="10" y="40"宽度="20" 高度="20"中风=无"填充=红色"/><g transform="translate(200,200)"><rectx="0" y="0"宽度=50"高度=5"中风="#10e9f3" 填充="#30ffd0"><动画属性名称=转换"属性类型=XML"begin="startbox.click" dur="1s" end="endbox.click"从=旋转(0)"到=旋转(360)"加法=总和"累积=总和"填充=冻结"重复计数=不确定"/></rect></svg>

解决方案

使用 animate 元素为变换设置动画是无效的，您必须使用 animateTransform.参见 http://www.w3.org/TR/SVG/animate.html#动画属性和属性

如果 Opera 使用该 UA 制作动画，您应该向 Opera 报告您的测试用例.

对于提出的问题，您可以使用 javascript 暂停动画，但使用 SVG 1.1据我所知，你不能声明性地做.

You can stop and repeat animations without limitations, but if you restart an indefinite animation it will loose its accumulative value and start from the initial value.

Maybe I should clarify with an example; Take this animation:

  <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"
  />

If I stop this animation, and start a different one (say id="second") that affects the same object's rotation, second will perfectly continue from the point where main left off. But if I start this one by clicking the startbox (or by any other event really) it will subtract all the difference made by main and reset the rotation before starting.

What I want to have is a proper "pausing", where I can continue where the animation stopped previously. Of course, I could add a fixed number of identical animations and the same number of identical start/stop buttons to emulate the effect, but that is not a good solution. Especially since the number of pauses is limited.

---

Whole example (only seems to work in 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>

解决方案

It's not valid to animate a transform with the animate element, you must use animateTransform. See http://www.w3.org/TR/SVG/animate.html#AnimationAttributesAndProperties

You should report your testcase to Opera if it animates with that UA.

  <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"
  />

As to the question asked, you can pause animations using javascript but with SVG 1.1 you can't do it declaratively as far as I know.

这篇关于svg 动画可以在不丢失累积信息的情况下暂停吗?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！