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

Question

我有一个左右移动的简单动画，我试图创建一个重置按钮，以便动画停止并恢复到默认状态，但我似乎无法正确处理。

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

主体加载初始化函数

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

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

例如像这样:

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

打开 this fiddle 以查看实际效果。

---

编辑:

由于位置也要重新设置，可以选择Raphael.transform()对于这个 Action 。

打开我的updated fiddle看看它是如何工作的。