我正在尝试使用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);
您需要采取什么方法来控制动画的动画?似乎没有一个回调挂钩。
答案 0 :(得分:10)
按照docs
,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();
如果你要做更多的动画,那么制作一个帧序列功能是值得的,就像我做here
一样答案 1 :(得分: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);
}
]);