Question

想象一下两个svg在某些代码中是相同的。如果在动画开始前单击按钮，我想阻止动画运行。但是如果动画正在运行，我希望它完成动画。我使用setTimeout（）在两个场景中复制buttonClick的行为。

如何使用javaScript实现这一目标？

也许这种方法可能有助于获得解决方案：

步骤1：检测动画是否正在运行
第二步：取消动画如果没有运行
第3步：其他使用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

自己控制动画的开始会更简单。然后，如果您不想启动动画，请不要启动它。

如果for (int n = 2; n <= max; ++n) if (prime(store, n)) store.push_back(n);元素没有特定的开始时间，它会一直等待，直到您通过调用<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排队时检测和停止动画，但不是在它运行时？

1 个答案: