放慢動畫補間

我創建了一個功能，增加了一個圖形到畫布佈景，並通過吐溫蓬勃生機，等待幾毫秒的時間，然後產生另一個放慢動畫補間

有幾件事情我可以做一些與幫助，

首先，我需要在他們之後的幾秒鐘播放以正常速度的資產減速至停止（我動畫在道路中間線）

其次，當動畫開始屏幕上沒有任何東西，因爲它們是道路標記，必須在開始時顯示

以及我如何刪除當動畫完成

這裏，每個項目的任何想法就是我到目前爲止

//this is called from the tick handler 
    function lines(){ 
    duration = 1000; 
    spawnCounter--; 
    console.log(spawnCounter) 
    if(spawnCounter == 0){ 
    spawnCounter = sNum//20 
    bolt = new lib.Bolt(); 
    bolt.x=280 
    bolt.y = 120; 
    bolt.rotation = -66; 
    stage.addChild(bolt); 
    createjs.Tween.get(bolt).to({x:0,y:0, scaleY:.6, scaleX:.6},duration) 

      } 
     }

來源

2015-09-15 Roy

在補間結束刪除項目是相當簡單：

createjs.Tween.get(bolt) 
    .to({x:0,y:0, scaleY:.6, scaleX:.6}, duration) 
    .call(function(event) { 
     stage.removeChild(bolt); 
    });

減緩整個動畫的方式可能會非常棘手，因爲您可能希望資產以相同的速度減速，所以您不能只更改補間的持續時間。您可能需要考慮不使用補間動畫，而只是控制勾號中的「可見」項目，並在距離太遠時將其刪除。

我創建了一個快速樣本，展示了它如何工作。 http://jsfiddle.net/wj15awj4/

生成的物品後，在一定的「距離」已經過去
過去邊緣
量表和α基於位置的項目中移除項目。規模有點奇怪，因爲道路沒有前景。這將更好地解決使用CSS或WebGL轉換畫布。

當道路被點擊時，「速度」被微調（或備份），並且由於項目是基於已經經過了多少「距離」創建的，所以它們將繼續在大致相同的速度，儘管隨着時間推移移動較慢

希望這會有所幫助！

來源

2015-09-16 16:03:47 Lanny

哇！我實際上已經實現了一些東西，但是這樣好多了，謝謝 – Roy

嗨剛剛注意到，這隻會使x產生動畫，我假裝視角的方式是讓路線對角線對着舞臺上的一個點，有沒有辦法讓我可以用這個腳本來做到這一點？再次感謝 – Roy

我將「速度」添加到x位置，但是您可以計算項目與目標點之間的距離，並將「速度」添加到該方向的項目中。使用畢達哥拉斯定理可能是最簡單的。 – Lanny

放慢動畫補間

回答

相關問題