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

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 に答える