停止动画并重置拉斐尔.js中元素的位置

Stop animation and reset position of an element in Raphaël.js

本文关键字：js 元素 位置 动画      更新时间：2023-09-26

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

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

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

例如像这样：

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

打开这个小提琴，看看它的实际效果。

编辑：

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

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

相关文章：