Mina in Snap svgの使い方は？

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) 

私は、彼らが次々に実行できるようにミナを使用して、これらのオブジェクトをアニメーション化します。
オブジェクトは1つずつフェードインする必要があります。
どうすればいいですか？

このコードではエラーは発生しませんが、すべてが1つずつではなく一度に表示されます。

Answer 1

animate関数にコールバックがあり、それを使用して次のアニメーションを呼び出します。

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を参照してください）。