如何在影響Kinetic.js中相同屬性的行中執行兩個補間？

Question

我正在使用Kinetic.js進行動畫製作，這需要對某些東西進行縮放，然後立即進行「非縮放」。我幾乎看到因爲第二個比例應該與原始比例值略有不同，所以我實際上不能使用this.reverse()。我嘗試製作第二個Tween，它在第一個的onFinish函數中被調用，但我似乎無法操縱它們中的比例。這裏是我嘗試代碼：

var waveScaleAnimation=new Kinetic.Tween({ 
     node:waves, 
     scaleY:newWaveScale, 
     duration:waveScaleDuration, 
     onFinish:function(){ 
      reverseWaveScaleAnimation.play(); 
     } 
    }); 
    var reverseWaveScaleAnimation=new Kinetic.Tween({ 
     node:waves, 
     scaleY:1, 
     duration:waveScaleDuration 
    }); 

真正奇怪的是reverseWaveScaleAnimation吐溫不是不工作的一個 - 如果我離開它是怎麼回事，現在，從waveScaleAnimation的scale被忽略（所以waves只是停留它的原始尺寸爲waveScaleAnimation的持續時間，然後獲得在reverseWaveScaleAnimation Y型比例爲1。如果我拿出的reverseWaveScaleAnimation的scaleY，並與另一個屬性替換（假設opacity），兩個吐溫正常工作（在waveScaleAnimation期間更改scaleY的waves，並在reverseWaveScaleAnimation期間更改其不透明度。c我會同時獲得兩個動畫，以便在每個補間期間將scaleY更改爲相應的值？

Answer 1

對我來說，解決辦法是實例化onFinish函數內部吐溫：

var waveScaleAnimation = new Kinetic.Tween({ 
    node:waves, 
    scaleY:newWaveScale, 
    duration:waveScaleDuration, 
    onFinish: function() { 
    var reverseWaveScaleAnimation = new Kinetic.Tween({ 
     node:waves, 
     scaleY: 1, 
     duration:waveScaleDuration, 
    }); 
    reverseWaveScaleAnimation.play(); 
    } 
}); 

在這裏看到我的例子：jsfiddle

對此的解釋可能是原始節點是返回到原來在執行reverseWaveScaleAnimation補間之前的狀態可能是因爲當你在外部實例化reverseWaveScaleAnimation時，它期望節點處於其原始狀態。但是，如果您在onFinish函數內實例化補間，則補間預期處於補間完成時處於的狀態。

希望這是有道理的，因爲我的解釋不是很詳細，也許別人可能能夠提供更多關於補間的細節，因爲我不經常使用它們。

編輯：實際上，這解釋了您從補間scaleY切換到opacity的場景。我假設最初您的節點將從1.0 opacity開始，但是當您將它調入012/時，該節點最初在1.0 opacity處啓動，因此補間從1.0 opacity開始並且補間朝0.0 opacity沒有問題。因此，似乎像吐溫，正在按原計劃onFinish，但實際上，它是做一樣的，當你在補間scaleY。