4

我正在尝试使用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);

您需要采取什么方法来控制事物何时具有动画效果？似乎没有一个回电可以联系。

4

2 回答 2

10

根据文档，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

如果您要制作更多动画，则值得制作帧序列功能，就像我在这里所做的那样

于 2014-04-04T06:38:08.860 回答
1

使用async.js 并查看系列函数...

这将按顺序运行这些动画：

async.series([
    function(callback) {
     whatever.animate({ transform: "s-1,1t0,200" }, 1000, mina.linear, callback);    
    },
    function(callback) {  
     whatever.animate({ transform: "t500,200s-1,1" }, 1000, mina.linear, callback);    
    },
    function(callback) {  
     whatever.animate({ transform: "t500,200s1,1" }, 1000, mina.linear, callback);    
    },
    function(callback) {  
     whatever.animate({ transform: "t0,200s1,1" }, 1000, mina.linear, callback);    
    }
]);
于 2016-11-22T01:59:03.153 回答