하나의 요소에 여러 개의 트윈이 있습니다.

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

createjs.Tween.get()의 override:true 옵션을 사용하여 기존 트윈을 중지하고 다른 트윈으로 대체 할 수 있습니다. 예를 들어 작업

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/