如何使用snap.svg对动画进行排序？

Question

我正在尝试使用http://snapsvg.io/为序列中的几个对象设置动画.

我希望第一个对象移动,一旦完成第二个移动对象等.

而是使用以下代码同时动画.

    var s = Snap("#svg");

    var triangle = s.path("M200 200,L600,500 L200,500 L200,200");

    var triangleClone = triangle.clone();
    triangleClone.animate({'transform' : 'r90,200,200 T400,300'}, 1000);

    var triangleClone2 = triangle.clone();
    triangleClone2.animate({'transform' : 'r180,200,200 T100,700'},1000);

    var triangleClone3 = triangle.clone();
    triangleClone3.animate({'transform' : 'r270,200,200 T-300,400'},1000);

您需要采取什么方法来控制动画的动画？似乎没有一个回调挂钩.

Answer 1

根据文档,Snap在动画后有一个回调函数

如果你想对几个进行排序,你可以让它更容易一些,并创建一个函数,你只需要传递它动画数组(参见底部的例子)......

var s = Snap("#svg");

var anim1 = function() { 
    triangleClone.animate({'transform' : 'r90,200,200 T400,300'}, 1000, mina.linear, anim2);
}

var anim2 = function() {
    triangleClone2.animate({'transform' : 'r180,200,200 T100,700'},1000, mina.linear, anim3);
}

var anim3 = function() {
    triangleClone3.animate({'transform' : 'r270,200,200 T-300,400'},1000);
}



var triangle = s.path("M200 200,L600,500 L200,500 L200,200");
var triangleClone = triangle.clone();
var triangleClone2 = triangle.clone();
var triangleClone3 = triangle.clone();

anim1();

的jsfiddle

如果你要做更多的动画,那么就像我在这里做的那样,制作一个帧序列功能是值得的