循环javascript动画的问题：Jsanim

我正在使用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>

var man=新的jsAnimManager（）；
函数animation1（）{
shroom=document.getElementById（“mushroom2”）；
男登记员职位（“mushroom2”）；
var monster=$（“#蘑菇屋2”）；
var offset=monster.offset（）；
var l=偏移量。左；
var r=偏移量。顶部；
空间设置位置（左、右）；
var anim=man.createAnimObject（“mushroom2”）；
动画添加（{属性：Prop.position，to:new Pos（l+100，r+400），
持续时间：1000，缓解期：jsanimese.parapolicneg}）；
}

我同样定义了另一个animation2（）函数

动画独立运行良好。 但是，我尝试在for循环中循环此动画

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

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


            }

for（变量i=1，l=data.length；i<6；i++）
{
if（（i==1）|（i==3））animation1（）；else animation2（）；
}

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

这是线程问题吗？我需要使用某种形式的线或枕木或其他东西吗

请帮忙

---

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

所有的动画功能实际上都是即时执行的。因为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();

最后，您需要在调用动画时添加

onComplete

选项：

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

---

希望这能让你走上正轨

到底是什么问题？你会拉小提琴吗？您是否已经尝试添加

onComplete:function（）{animation1（）；}

？太棒了。谢谢我会尝试一下。你还喜欢其他javascript库吗？它有更多的功能，并且易于用于2d web动画？有几种很好的库（Jsanim就是其中之一），这取决于你想做什么样的动画，但我也喜欢$fx动画库（）。它非常容易使用，而且非常小（4Kb）。与Jsanim一样，它不需要任何其他库（如jQuery或MooTools）。如果您已经在使用jQuery，也可以使用它制作动画，但如果动画是您所需要的，我不推荐使用它。如果你想要一个更详细的答案，考虑开始一个新的问题，这样你就可以得到更多的意见。希望有帮助！

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