Question

我正在使用jsAnim来制作一些简单的动画。

我创建了一个简单的javascript函数 -

<script type="text/javascript">
var man = new jsAnimManager(); 

function animation1() {
    shroom = document.getElementById("mushroom2");

    man.registerPosition("mushroom2");

    var monster =  $("#mushroom2");
var offset = monster.offset();
var l=offset.left;
var r= offset.top;


    shroom.setPosition(l,r);

    var anim = man.createAnimObject("mushroom2");

    anim.add({property: Prop.position, to: new Pos(l+100,r+400), 
           duration: 1000,ease:jsAnimEase.parabolicNeg });
}

</script>

我已经类似地定义了另一个animation2（）函数。

动画独立运作良好。但是我试图在for循环中循环播放这个动画。

for( var i=1, l=data.length; i < 6 ; i++) 
            {

                  if  ((i==1 )||(i==3)) animation1(); else animation2();


            }

但我观察到的是动画只发生在i = 5（即循环停止执行后）。 i = 1-4没有动画。

这是一些线程问题吗？我需要使用某种形式的线程或睡眠者吗？

请帮忙。

我希望让对象分阶段采用几种不同的路径。

Answer 1

所有动画功能几乎都是即时执行的。因为jsanim库没有队列功能，所以在这种情况下您将看到的唯一动画是最后一个（因为每次执行下一个动画时，最后一个动画都会被中止）。

但它确实有一个onComplete回调处理程序，因此队列很容易实现。您需要一个对所有函数都可见的队列数组：

var animationQueue = [];

然后更改for循环以将函数添加到队列而不是执行它们：

for( var i=1; i<6; i++)  {
    if  (i%2==1)    //if i is odd number
        animationQueue .push(animation1); 
    else            //else i is even number
        animationQueue .push(animation2); 
}
nextAnimation();

另请注意，我使用了i%2==1。当你说if(i==1 || i==3)时，我假设你想要奇数。 nextAnimation（）函数可能如下所示：

function nextAnimation() {
    if(animationQueue.length) 
        animationQueue.shift()();
}

最后，您需要在动画调用中添加onComplete选项：

anim.add({
    property: Prop.position,
    to: new Pos(l+100,r+400),
    duration: 1000,
    ease:jsAnimEase.parabolicNeg,
    onComplete: nextAnimation
});

希望能让你走上正轨！

循环javascript动画的问题：Jsanim

1 个答案: