一個元素上的多個補間

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/