如何在Snap svg中使用Mina？

Question

这是使用捕捉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) 

我想用动画米娜，使他们可以一个接一个执行这些对象。
对象应逐渐淡入。
该怎么办？

此代码没有提供任何错误，但是它们都是一次而不是一次接一个。

Answer 1

在动画函数中有一个回调函数，用它来调用下一个动画。

var 
 
s = Snap(300,300), 
 
circle7 = s.circle(130,90,5).attr({fill:"#fff",opacity:0}), 
 
circle8 = s.circle(155,90,5).attr({fill:"#fff",opacity:0}), 
 
circle9 = s.circle(180,90,5).attr({fill:"#fff",opacity:0}), 
 
circle10 = s.circle(205,90,5).attr({fill:"#fff",opacity:0}), 
 
circle11 = s.circle(230,90,5).attr({fill:"#fff",opacity:0}), 
 
circle12 = s.circle(255,90,5).attr({fill:"#fff",opacity:0}), 
 
duration = 500, 
 
props = {fill:"#00f",opacity:1}; 
 

 
/* 
 
var anim = function() { circle.animate({fill:"#00f",opacity:1}, duration,mina.linear,anim1);} 
 
var anim1 = function() { circle1.animate({fill:"#00f",opacity:1},duration,mina.linear,anim2);} 
 
var anim2 = function() { circle2.animate({fill:"#00f",opacity:1},duration,mina.linear,anim3);} 
 
var anim3 = function() { circle3.animate({fill:"#00f",opacity:1},duration,mina.linear,anim4);} 
 
var anim4 = function() { circle4.animate({fill:"#00f",opacity:1},duration,mina.linear,anim5);} 
 
var anim5 = function() { circle5.animate({fill:"#00f",opacity:1},duration,mina.linear,anim6);} 
 
var anim6 = function() { circle6.animate({fill:"#00f",opacity:1},duration,mina.linear,anim7);} 
 
*/ 
 

 
var anim7 = function() { circle7.animate(props,duration,mina.linear,anim8);} 
 
var anim8 = function() { circle8.animate(props,duration,mina.linear,anim9);} 
 
var anim9 = function() { circle9.animate(props,duration,mina.linear,anim10);} 
 
var anim10= function() { circle10.animate(props,duration,mina.linear,anim11);} 
 
var anim11= function() { circle11.animate(props,duration,mina.linear,anim12);} 
 
var anim12= function() { circle12.animate(props,duration,mina.linear);}; 
 

 

 
anim7();

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.4.1/snap.svg-min.js"></script>

Answer 2

没有任何东西让它们在一个序列中变成动画。

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

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

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

function callbackFunc3()... 

依此类推。当你有很多东西时，自然会觉得有点笨重，所以我觉得添加序列插件是很有用的。例如here

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

} 

我还扩大了一点，并建议其here（见的jsfiddle），这可能是有用的，如果你做了很多人。