Raphaeljs间隔后动画路径

  • Z时代
  • 2024-01-10
  • 分类：问答

我有一个路径，我想动画每5秒。我在下面的代码中尝试使用setInterval，但它不断复制画布。有更简单的解决方案吗？Raphaeljs间隔后动画路径

JS小提琴Link

window.onload= function aa() { 
    paper = Raphael(0,0,900,900);  
    var p=paper.path("M10,10 h20 v10 h-20z"); 
    p.animate({path:"M10,10 h300 v10 h-300z"},5000); 
    //window.setInterval(aa(), 5000); 
}​

回答：

你都在重复着整个aa函数初始化拉斐尔纸（paper = Raphael(0,0,900,900);）。这就是为什么你的画布被复制。
此外，最好使用回调（您可以在animate上看到the docs）而不是setInterval来触发您的动画。
这是我会怎样代码时：

function init(){ 
    var paper = Raphael(0, 0, 900, 900), 
     pathsString = ["M10,10 h20 v10 h-20z","M10,10 h300 v10 h-300z"], 
     p = paper.path(pathsString[0]), 
     animationCounter = 0, 
     animationDuration = 5000, 
     animate = function(){ 
      animationCounter++; 
      p.animate({path : pathsString[animationCounter %2]}, animationDuration, animate); 
     }; 
    animate(); 
}; 
window.onload = init;​

下面是上面代码的a working example。

以上是 Raphaeljs间隔后动画路径 的全部内容， 来源链接： utcz.com/qa/257564.html

回到顶部