如何创建 javascript 顺序动画？

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 顺序动画？

How to create javascript sequential animation?

javascript

animation

snap.svg