Question

我正在寻找一种允许我使用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);
 });
});

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

Answer 1

您需要重写原始代码的几个部分，主要是

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

here是一个使用不同图像和使用群组的测试，因为我没有看到您的原始图像，但它应该说明上述内容。

如何创建javascript顺序动画？

1 个答案: