svg動畫可以暫停而不會丟失累積信息？

您可以不受限制地停止和重複動畫，但是如果您重新啓動無限動畫，它將失去其累計值並從初始值開始。svg動畫可以暫停而不會丟失累積信息？

也許我應該用一個例子來說明;就拿這個動畫：

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

來源

2012-10-02 bitmask

這不是有效的動畫與動畫元素的變換，你必須使用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" 
    />

至於問的問題，你可以pause animations using javascript但SVG 1.1你不能做到這一點的聲明據我所知。

來源

2012-10-02 16:34:50

我最初是用'rect.x'測試它，但這是比較容易看到。我會看看JS，謝謝。 – bitmask

它內置SVG

SVGRoot.pauseAnimations();

來源

2014-10-13 21:38:36

注意play函數是unpauseAnimations（）。我花了一段時間來弄清楚。 – Leo

用於SVG DOM接口的MDN鏈接：https：//developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement – adam

svg動畫可以暫停而不會丟失累積信息？

回答

相關問題