Проблема с зацикливанием анимации JavaScript: Jsanim

Question

Я использую jsAnim для некоторых простых анимаций.

http://jsanim.com/

Я создал простую функцию 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
});

Надеюсьвыводит вас на правильный путь!