javascript - 在 Raphaël.js 中停止动画并重置元素的位置

Question

我有这个从一边移动到另一边的简单动画，我试图创建一个重置按钮，以便动画停止并恢复默认值，但我似乎无法正确。

我正在使用的库是 Raphael，但我几乎可以肯定，使用简单的 javascript，我可以重置函数内部的值。

正文 onload 初始化函数

function init() {
  paper = Raphael("loadSVG");

  var bg = paper.rect( 0, 0, "240px", "90px", 0 );
  bg.attr( {fill: "#f3f3ff"} );
  rect1 = paper.rect(150, 20, 50, 50);
  rect1.attr( {fill: "#ffaaaa", "stroke-width": 3} );
}

动画功能

function moveRect1() {      
  if( xEnd == 150 )
    xEnd = 50;
  else
    xEnd = 150;

  rect1.animate( {x: xEnd}, 1000, "Sine", function (){ 
    moveRect1(); 
  }); 
}

和不起作用的停止按钮:)

function stopsvgRect1() {
  rect1.stop();
}

Answer 1

您需要将停止按钮绑定到您创建的函数。

例如像这样：

document.querySelector('#stop').onclick = function() {
    stopsvgRect1();
};

打开这个小提琴来看看它的作用。

---

编辑：

由于位置也应该被重置，您可以选择Raphael.transform()此操作。

打开我更新的小提琴，看看它是如何工作的。