Javascript 如何在Snap svg中使用Mina？

这是一个使用Snap svg的动画代码：

var s = Snap(3000,3000);

var circle7 = s.circle(130,90,5);
var circle8 = s.circle(155,90,5);
var circle9 = s.circle(180,90,5);
var circle10 = s.circle(205,90,5);
var circle11 = s.circle(230,90,5);
var circle12 = s.circle(255,90,5);


circle.attr({fill:"#ffffff",opacity:0});
circle1.attr({fill:"#ffffff",opacity:0});
circle2.attr({fill:"#ffffff",opacity:0});
circle3.attr({fill:"#ffffff",opacity:0});
circle4.attr({fill:"#ffffff",opacity:0});
circle5.attr({fill:"#ffffff",opacity:0});
circle6.attr({fill:"#ffffff",opacity:0});
circle7.attr({fill:"#ffffff",opacity:0});
circle8.attr({fill:"#ffffff",opacity:0});
circle9.attr({fill:"#ffffff",opacity:0});
circle10.attr({fill:"#ffffff",opacity:0});
circle11.attr({fill:"#ffffff",opacity:0});
circle12.attr({fill:"#ffffff",opacity:0});

circle.animate({fill:"#0000FF",opacity:1},4500);
circle1.animate({fill:"#0000FF",opacity:1},4000);
circle2.animate({fill:"#0000FF",opacity:1},3500);
circle3.animate({fill:"#0000FF",opacity:1},3000);
circle4.animate({fill:"#0000FF",opacity:1},2500);
circle5.animate({fill:"#0000FF",opacity:1},2000);
circle6.animate({fill:"#0000FF",opacity:1},1500);

circle7.animate({fill:"#0000FF",opacity:1},4500);
circle8.animate({fill:"#0000FF",opacity:1},5000);
circle9.animate({fill:"#0000FF",opacity:1},5500);
circle10.animate({fill:"#0000FF",opacity:1},6000);
circle11.animate({fill:"#0000FF",opacity:1},6500);
circle12.animate({fill:"#0000FF",opacity:1},7000);

var cloud = s.image("D:/DigiMKey/login page_files/cloud.png", 0 , 260, 180, 
125);
cloud.attr({opacity:0,width:100,height:65});
cloud.animate({opacity:1,width:200,height:125},1000)

var school =s.image("D:/DigiMKey/images/School-Icon.png", 265, 50, 100,100);
school.attr({opacity:0,width:80,height:80});
school.animate({opacity:1,width:100,height:100},2000)  

我想使用Mina设置这些对象的动画，以便它们可以一个接一个地执行。
对象应该一个接一个地淡入。
怎么做

---

这段代码没有错误，但是它们都是同时出现的，而不是一个接一个地出现

没有任何东西可以让它们在一个序列中产生动画效果

在序列中设置动画的方法是使用回调，这是animate（）方法的一部分。所以你可以

circle1.animate({ fill:"#0000FF" }, 1000, mina.linear, callbackFunc2 );

function callbackFunc2() {
   circle2.animate({ fill:"#0000FF" }, 1000, mina.linear, callbackFunc3 );
}

function callbackFunc3()...

等等。当然，当你有很多东西的时候，会觉得有点笨重，所以我发现添加一个序列插件来帮助你是很有用的。比如说

---

我还对它进行了一点扩展，并建议使用它（请参阅JSFIDLE），如果您正在执行大量操作，它可能会很有用。

在animate函数中有一个回调，请使用它调用下一个动画

var
s=Snap（300300），
circle7=s.circle（130,90,5）.attr（{fill:#fff'，不透明度：0}），
circle8=s.circle（155,90,5）.attr（{fill:#fff'，不透明度：0}），
circle9=s.circle（180,90,5）.attr（{fill:#fff'，不透明度：0}），
circle10=s.circle（205,90,5）.attr（{fill:#fff'，不透明度：0}），
circle11=s.circle（230,90,5）.attr（{fill:#fff'，不透明度：0}），
circle12=s.circle（255,90,5）.attr（{fill:#fff'，不透明度：0}），
持续时间=500，
道具={fill:#00f'，不透明度：1}；
/*
var anim=function（）{circle.animate（{fill:#00f），不透明度：1}，持续时间，mina.linear，anim1）；}
var anim1=function（）{circle1.animate（{fill:#00f），不透明度：1}，持续时间，mina.linear，anim2）；}
var anim2=function（）{circle2.animate（{fill:#00f），不透明度：1}，持续时间，mina.linear，anim3）；}
var anim3=function（）{circle3.animate（{fill:#00f），不透明度：1}，持续时间，mina.linear，anim4）；}
var anim4=function（）{circle4.animate（{fill:#00f），不透明度：1}，持续时间，mina.linear，anim5）；}
var anim5=function（）{circle5.animate（{fill:#00f），不透明度：1}，持续时间，mina.linear，anim6）；}
var anim6=function（）{circle6.animate（{fill:#00f），不透明度：1}，持续时间，mina.linear，anim7）；}
*/
var anim7=function（）{circle7.animate（道具、持续时间、mina.linear、anim8）；}
var anim8=function（）{circle8.animate（道具、持续时间、mina.linear、anim9）；}
var anim9=function（）{circle9.animate（道具，持续时间，mina.linear，anim10）；}
var anim10=function（）{circle10.animate（道具，持续时间，mina.linear，anim11）；}
var anim11=function（）{circle11.animate（道具，持续时间，mina.linear，anim12）；}
var anim12=function（）{circle12.animate（道具，持续时间，mina.linear）；}；
anim7（）
好建议。。。。第一个答案也适用于我，你的答案很简洁。。。。非常感谢。
function nextFrame ( el, frameArray,  whichFrame ) {
    if( whichFrame >= frameArray.length ) { return }
    el.animate( frameArray[ whichFrame ].animation, frameArray[ whichFrame ].dur, nextFrame.bind( null, el, frameArray, whichFrame + 1 ) );

}