Question

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

我使用的库是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(); 
  }); 
}

和停止按钮不起作用：）

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

Answer 1

您需要将停止按钮绑定到您创建的功能。

例如：

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

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

修改：

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

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

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

1 个答案: