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

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/

Я не уверен, можно ли за один твин влиять на состояние объекта был оставлен в другой, так как, когда я ударил «Up» перескакивает бар в исходное положение.

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

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/