Javascript 停止动画并重置Raphaë中元素的位置；l、 js

我有一个简单的动画，从一边移动到另一边，我试图创建一个重置按钮，以便动画停止并返回到默认值，但我似乎不能得到我的权利

我使用的库是Raphael，但我几乎可以肯定，通过一个简单的javascript，我可以重置函数中的值

Body onload init函数

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(); 
  }); 
}

还有不起作用的停止按钮：）

---

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

例如：

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

打开查看它的运行情况

---

编辑：

由于位置也应重置，因此您可以选择执行此操作

---

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

就像一个魔咒，但它唯一的“暂停”动画我的问题更多，如何重置动画的值，使其返回默认值。我已经更新了我的答案，我希望它通过小提琴本身变得清晰：）AAA太好了！非常感谢你。我将尝试这样做，所以当我按下播放两次，它会重新启动动画。。如果我做不到，我会给你发邮件；）

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