gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-04 22:31:24 25 4
gpt4 key购买 nike

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

您需要采取什么方法来控制事物的动画效果?似乎没有一个回调可以挂入。

最佳答案

根据 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();

jsfiddle

如果你打算做更多的动画,可能值得制作一个帧序列函数,就像我做的 here

关于snap.svg - 如何使用 snap.svg 对动画进行排序?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22849576/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com