Объединение анимаций в Tween.js для нескольких объектов

Итак, у меня есть большой стек объектов Easel.js, которые я храню в массиве.

Я хотел бы связать набор анимаций для каждого объекта, а затем, когда каждая цепочка анимаций завершится, сбросить свойства анимаций и продолжить. Это то, что у меня есть до сих пор:

function setObjectTween(tgt){
        createjs.Tween.get(tgt, { loop: false })
          .to({ x: randomOnStage("x", constraint[0],constraint[1]) }, randomInRange(100,1000), createjs.Ease.getPowOut(4))
          .to({ y: randomOnStage("y", constraint[0],constraint[1]) }, randomInRange(100,1000), createjs.Ease.getPowOut(4))
          .call(resetTween);

    }

    function resetTween(e){
        createjs.Tween.removeAllTweens(e.target);
        setObjectTween(e.target);
    }

Проблема в том, что resetTween останавливает анимацию всех клипов одновременно. Я думал, что настройка каждого объекта с помощью твина выглядит так:

for(i=0;i<objpool1.length;i++){setObjectTween(objpool[i]);}

будет держать анимацию каждого объекта независимой. Когда он дойдет до конца, он вызовет функцию сброса, которая удалит анимацию только для этого объекта, а затем повторно запустит настройку, снова только для этого объекта, снова запустив анимацию с новыми случайными значениями.

Любые идеи, почему сброс, по-видимому, влияет только на последний объект в массиве, а не работает независимо для каждого объекта (nb, все объекты массива работают в первый раз, но сброс, похоже, сбрасывает их все, а затем работает только на последний объект в массиве).

здравствуйте, А.:

e2a: Сортировка. Ошибка чтения документации. Благодаря ответу ниже! :о)


javascript animation chaining createjs tweenjs
person jerikojones    schedule 09.09.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Методы removeAllTweens не принимают никаких параметров. Происходит следующее: вы убиваете каждую анимацию (предотвращая последующие вызовы resetTween другими анимациями), и перезапускается только самая первая завершенная анимация.

Вместо этого измените его на removeTweens.

function resetTween(e){
    createjs.Tween.removeTweens(e.target);
    setObjectTween(e.target);
}

Вот скрипт: http://jsfiddle.net/6d9bckb4/

person Lanny    schedule 09.09.2016