循环 javascript 动画的问题：Jsanim

发布于 2024-12-11 13:36:32 字数 1068 浏览 0 评论 0原文

我正在使用 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 没有动画。

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

请帮忙。

我希望让物体分阶段走几条不同的路径。

原文

I am using jsAnim for some simple animations .

http://jsanim.com/

I have created a simple javascript function -

<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>

I have similarly defined another animation2() function .

The animation works well independently .
However I am trying to loop this animation inside a for loop.

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

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


            }

But what I observe is that the animation happens only for i=5 ( i.e .. after the loop stops executing ) . There is no animation for i = 1-4 .

Is this some threading issue ? Do I need to use some form of threads or sleeper or something ?

Please help .

I wish to make the object take a few different paths in stages .

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花期渐远 2024-12-18 13:36:32

所有动画功能几乎都是即时执行的。因为 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
});

希望这能让您走上正确的轨道！

All of the animation functions are being executed virtually instantaneously. Because the jsanim library doesn't have queue functionality, the only animation you will see in this case is the last one (because each time the next animation is executed, the last one is aborted).

But it does have an onComplete callback handler, so a queue is easy enough to implement. You need a queue array that is visible to all functions:

var animationQueue = [];

Then change your for loop to add the functions to the queue instead of executing them:

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

Also notice that I used i%2==1. I am assuming you want odd numbers here when you say if(i==1 || i==3). The nextAnimation() function could look something like this:

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

And lastly, you need to add the onComplete option in your call to the animation:

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

Hope that gets you onto the right track!

回复收藏 0 原文

~没有更多了~