如何创建javascript顺序动画

How to create javascript sequential animation?

本文关键字：javascript 顺序 动画 创建 何创建      更新时间：2023-12-13

我正在寻找一种方法，允许我使用Javascript创建顺序动画。。。这是我的尝试：

var b = Snap("#backgroundSvg"); //Initilizing Snap.svg
Snap.load("../img/landscape.svg", function(f){ //Loading the image
 b.append(f); //Appending it to the DOM
 polygon = f.selectAll("polygon"); //Selecting all the polygon elements
 polygon.attr({"fill-opacity": 0}); //Make them transparent
 polygon.forEach(function(e){ //Trying to make a sequential animation
   setTimeout(function (){
     e.animate({ 
       "fill-opacity":1
     }, 800, mina.easein);
   },200);
 });
});

但当我运行时，结果是一个简单、无聊的图像动画。。。我怎么能那样做？

您需要重写一些原始代码，主要是

f.selectAll("polygon");

至

 b.selectAll("polygon"); //as you have now appended the fragment, otherwise it may return empty

并在forEach循环上使用索引i来稍后调整超时。

polygon.forEach(function(e,i){ //Trying to make a sequential animation
    setTimeout(function (){
       e.animate({ 
          "fill-opacity":1
        }, 800, mina.easein);
    },i*200);
});

这是一个使用不同图像和组的测试，因为我没有你的原始图像，但它应该说明以上内容。

相关文章：