Несколько Твинов на одном элементе

Question

У меня есть бар, который медленно сжимается через подростка. Я хотел бы иметь две кнопки, управляющие направлением этого бара, так что если я нажму "Вверх", то бар начнет подниматься обратно к своей первоначальной форме, а "Вниз" заставит его снова начать уменьшаться.

var bar1Command = bar1.graphics.drawRect(75, 130, 10, 130).command;
var tween1 = createjs.Tween.get(bar1Command, { loop: false, paused: false }).to({ h: 0, y: 260 }, 10000);
var tween2 = createjs.Tween.get(bar1Command, { loop: false, paused: true }).to({h: 130, y: 130}, 10000);

function up() {
  tween1.setPaused(true);
  tween2.setPaused(false);
}

function down() {
  tween1.setPaused(false);
  tween2.setPaused(true);
}

https://jsfiddle.net/rgg8p9k6/

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

Спасибо за помощь!

Answer 1

Вы можете сделать это с помощью override:true вариант в createjs.Tween.get() остановить существующую анимацию движения и заменить ее другой.

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

var duration = 10000;

function up() {
  duration = 10000 * ((130 - bar1Command.h) / 130);
  tween1 = createjs.Tween.get(bar1Command, { loop: false, override:true }).to({ h: 130, y: 130 }, duration);
}

function down() {
  duration = 10000 * (bar1Command.h / 130);
  tween1 = createjs.Tween.get(bar1Command, { loop: false, override:true }).to({ h: 0, y: 260 }, duration);
}

Рабочий пример: https://jsfiddle.net/pc4rjnLg/1/