SVGでアニメーションを検出して停止させるにはどうすればいいですか？

Question

いくつかのコードでは、両方のsvgが同じであるとします。アニメーションが始まる前にボタンをクリックするとアニメーションが実行されないようにしたい。しかし、アニメーションが実行されている場合は、アニメーションを終了します。私は、2つのシナリオでbuttonClickの動作を複製するためにsetTimeout（）を使用しました。

これを達成するにはどうすればよいですか？

たぶん、このアプローチは、溶液を得ることに役立つかもしれない：

• STEP1：アニメーションが
• STEP2を実行しているかどうかを検出：他に使用：それは
• STEP3を実行していない場合アニメーションをキャンセルしますアニメーションを終了させるためのdocument.getElementById("animate1").setAttribute("begin", "");。

JSFiddle：https://jsfiddle.net/7hc6710p/1/

SVG

<svg viewBox="0 0 500 500"> 
    <rect width="500" height="500" x="0" y="0"> 
    <animate id="animate1_1" attributeType="xml" attributeName="fill" from="black" to="red" dur="5s" begin="5s; animate1_2.end" fill="freeze"/> 
    <animate id="animate1_2" attributeType="xml" attributeName="fill" from="red" to="black" dur="5s" begin="animate1_1.end" fill="freeze"/> 
    </rect> 
</svg> 
<svg viewBox="0 0 500 500"> 
    <rect width="500" height="500" x="0" y="0"> 
    <animate id="animate2_1" attributeType="xml" attributeName="fill" from="black" to="red" dur="5s" begin="5s; animate2_2.end" fill="freeze"/> 
    <animate id="animate2_2" attributeType="xml" attributeName="fill" from="red" to="black" dur="5s" begin="animate2_1.end" fill="freeze"/> 
    </rect> 
</svg> 

javascriptの

//imagine both svg's are the same in some code. I want to prevent an animation from running if I click a button before the animation starts. But if the animation is running I want it to finish the animation. I used a setTimeout() to replicate the behavior of the buttonClick in two scenario's. 

//How do I achieve this by using javaScript? 

//maybe those ideas help in getting a solution: 
//step1: detect if animation is running 
//step2: cancel animation if it is not running, else use: 
//document.getElementById("animate1").setAttribute("begin", ""); 
//to let the animation finish. 

//scenario 1: this animation should not run. Clicked before the animation starts 
document.getElementById("animate1_1").setAttribute("begin", ""); 

//scenario 2: this animation should finish. Clicked while the animation is running. 
setTimeout(function(){ 
    document.getElementById("animate2_1").setAttribute("begin", ""); 
}, 6000); 

Answer 1

アニメーションの開始を自分でコントロールする方が簡単だろう。アニメーションを開始したくない場合は、アニメーションを起動しないでください。

<animate>要素に特定の開始時刻がない場合は、beginElement()を呼び出して開始するまで待機します。

以下の例では、setTimeout()を使用して、両方のアニメーションの実行をスケジュール設定してから、最初のアニメーションをキャンセルします。

// The enimations to start running 
 
var animStartElements = ["animate1_1", "animate2_1"]; 
 
// An object we will use as a map to stor timeout handles 
 
var animStartTimers = {}; 
 

 
// Schedule each animation to start after five seconds 
 
animStartElements.forEach(function(elemId) { 
 
    var animElem = document.getElementById(elemId); 
 
    // Use a timeout to schedule the start of this animation 
 
    var timeoutHandle = setTimeout(function() { 
 
    // beginElement() on an <animation> element starts it running 
 
    animElem.beginElement(); 
 
    }, 5000); 
 
    // Record the timeout handle in the animStartTimers map 
 
    animStartTimers[elemId] = timeoutHandle; 
 
}) 
 

 
// Cancel the first animation from running (eg as a response to a click) 
 
// Comment this line out to see it run. 
 
clearTimeout(animStartTimers["animate1_1"]);

<svg viewBox="0 0 500 500" width="200"> 
 
    <rect width="500" height="500" x="0" y="0"> 
 
    <animate id="animate1_1" attributeType="xml" attributeName="fill" from="black" to="red" dur="2s" begin="animate1_2.end" fill="freeze"/> 
 
    <animate id="animate1_2" attributeType="xml" attributeName="fill" from="red" to="black" dur="2s" begin="animate1_1.end" fill="freeze"/> 
 
    </rect> 
 
</svg> 
 
<svg viewBox="0 0 500 500" width="200"> 
 
    <rect width="500" height="500" x="0" y="0"> 
 
    <animate id="animate2_1" attributeType="xml" attributeName="fill" from="black" to="red" dur="2s" begin="animate2_2.end" fill="freeze"/> 
 
    <animate id="animate2_2" attributeType="xml" attributeName="fill" from="red" to="black" dur="2s" begin="animate2_1.end" fill="freeze"/> 
 
    </rect> 
 
</svg>