问题循环一个JavaScript动画：Jsanim

我使用jsAnim一些简单的动画。问题循环一个JavaScript动画：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的动画。

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

请帮忙。

我希望让对象分阶段走几条不同的路。

来源

2011-10-23 geeky_monster

确切的问题是什么？你能演一个小提琴吗？你已经尝试添加'onComplete：function（）{animation1（）;}'？ –

所有的动画功能几乎是瞬间执行的。由于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 
});

希望得到您正轨！

来源

2011-10-23 10:30:51 Donamite

太棒了。谢谢。我会试试这个。 –

是否有任何其他的JavaScript库，你更喜欢哪些，有更多的功能和易于使用的2D动画？ –

有几个很好的（Jsanim是其中之一），它取决于你想要做什么样的动画，但我也喜欢$ fx动画库（http://fx.inetcat.com/ ）。它非常易于使用，而且非常小（4Kb）。像Jsanim一样，它不需要任何其他库（如jQuery或MooTools）。如果你已经在使用jQuery，你也可以用它来做动画，但如果动画是你需要的，我不会推荐它。如果您想要更详细的答案，请考虑开始一个新问题，以便获得更多意见。希望有所帮助！ – Donamite

问题循环一个JavaScript动画：Jsanim

回答

相关问题