3

私は SVG を使用して連鎖アニメーションを表示しており (前のパスが完了すると各パスが自動的に開始されます)、うまく動作させることができました。アニメーション チェーンをリセットする「更新」要素も使用しました。

私の問題は、アニメーションを「スキップ」する方法を提供したいということです。アニメーションなしでパスを表示する要素をトリガーする要素を追加するのは簡単ですが<set>、これは各要素を通過し続ける (要素をリセットして再描画する) アニメーション チェーンを停止しません。

連鎖した SVG アニメーションを停止するWebKit 対応の方法が必要です...

私が試したこと：

  • によってトリガーされる要素に:end属性を設定すると、現在のストロークのアニメーションが停止しますが、それでもイベントが発生するため、チェーンは停止しません。<animate>skip.clickend

  • begin属性を設定し、indefinite各パスの最後で次のパスのアニメーションを手動でトリガーします。onendただし、これには要素内でコードを実行する機能が必要になりますが<animate>、これは WebKit がまだサポートしていないようです。

  • 進行中のアニメーションを (イベントをトリガーせずに) 停止する方法を見つけてendいますが、SVG の現在のバージョンの参照は何も提供していないようです (SVG/SMIL の将来のバージョンの起草に関するプレゼンテーションで、解決すべき問題としてリストされているのを見ました)。 ）。

誰かがこの問題に対する何らかの回避策を考え出したことを願っていました。「再起動」ボタンと「スキップ」ボタンを備えた一連のアニメーションが欲しいと思ったのは、私が初めてではないと思います...

参考までに、私が使用している SVG コードのタイプの簡単な例を次に示します (プログラムによってオンザフライで生成されるため、可能な限りコンパクトではない可能性があります)。

<svg width="220" height="220" viewBox="0 0 109 109" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" version="1.1"  baseProfile="full">  
    <path d="M33.28,19.04c1.84,0.71,3.7,0.86,5.4,0.63c4.95-0.67,27.95-4.58,29.86-4.92c3.46-0.62,4.06,1.36,2.11,3.58c-1.95,2.22-11.41,13.17-16.35,17.19" style="fill:none;stroke:rgb(230,71,71);stroke-width:3" stroke-dasharray="67.00,67.00" stroke-dashoffset="67.00" stroke-linecap="round">
        <animate id="step0" attributeName="stroke-dashoffset" values="67.00;0" dur="1.3s" begin="0.10;refresh.click+0.01" fill="freeze" keySplines="0.5 0 0.5 1" calcMode="spline" />
        <set attributeName="stroke-dashoffset" to="67.00" begin="refresh.click" /> 
    </path> 
    <path d="M52.48,37.74c6.42,2.97,11.75,30.73,5.24,52.57c-2.8,9.38-8.09,2.96-10.47,0.99" style="fill:none;stroke:rgb(230,71,71);stroke-width:3" stroke-dasharray="70.00,70.00" stroke-dashoffset="70.00" stroke-linecap="round">
        <animate id="step1" attributeName="stroke-dashoffset" values="70.00;0" dur="1.4s" begin="step0.end+0.1s" fill="freeze" keySplines="0.5 0 0.5 1" calcMode="spline" />
        <set attributeName="stroke-dashoffset" to="70.00" begin="refresh.click" /> 
    </path> 
    <path d="M12.25,51.48c3.75,1.14,8.79,1.03,12.48,0.49c16.77-2.47,42.86-5.84,58.53-6.75c4.26-0.25,9.11-0.34,13.11,0.57" style="fill:none;stroke:rgb(230,71,71);stroke-width:3" stroke-dasharray="85.00,85.00" stroke-dashoffset="85.00" stroke-linecap="round">
        <animate id="step2" attributeName="stroke-dashoffset" values="85.00;0" dur="1.7s" begin="step1.end+0.1s" fill="freeze" keySplines="0.5 0 0.5 1" calcMode="spline" />
        <set attributeName="stroke-dashoffset" to="85.00" begin="refresh.click" /> 
    </path> 
    <g id="skipAnimation" visibility="visible"> <set  attributeName="visibility" begin="step2.end" end="refresh.click" to="hidden"/> 
        <text id="skip" x="95" y="105" stroke="#AAA" stroke-width="0.5" style="font-size:11px;">➠&lt;/text>
    </g>
    <g id="animationDone" visibility="hidden"> <set  attributeName="visibility" begin="step2.end" end="refresh.click" to="visible"/> 
        <text id="refresh" x="95" y="105" stroke="#AAA" stroke-width="0.5" style="font-size:11px;">↻&lt;/text>
    </g>
</svg>
4

0 に答える 0