停止tween.js和three.js中的補間動畫

我在使用tween.js停止three.js中的補間時遇到問題。該文檔聲明使用tween.stop()，但這似乎不起作用。停止tween.js和three.js中的補間動畫

當你用鼠標在一個盒子徘徊，它開始改變顏色。這個動畫需要10秒鐘，但我試圖阻止它只是使用setTimeout(function(){ tween.stop() }, 1000);測試.stop（）功能，但它不會做一件事...

任何幫助非常感謝！

2016-05-16 binoculars

你是否開始你的補間？我在animate（）中看不到補間更新函數。您也可以在控制檯中調用TWEEN.getAll（）來檢查您的補間是否正常工作。 – Martin

在我的項目中，animate（）函數中有'tween.update（time)'。在jsfiddle中它顯然是在第144行。我嘗試使用'console.log（TWEEN.getAll（））'。在我調用'tween.stop（）'後，我的控制檯輸出'[]'，所以我猜停止了補間，但動畫（=改變顏色）繼續。 – binoculars

動畫可能是除補間之外的其他動作的結果嗎？ – Martin

有引用問題和更新問題。我對你的代碼做了一些修改。這不是一個解決方案，你可以單獨使用每個更改。最好的解決方案是將每個補間製作爲一個函數內的var，在補間對象中進行計數並使用onUpdate（function（）{if（this.counter> 1000）{tween.stop}}）（INTERSECTED.material.color）因爲你創建了很多未引用的定時器和補間，這將是一個性能問題。

function animate() { 
     // 
     TWEEN.update(); 
     // 
} 

    if (intersects.length > 0) { 

     if (INTERSECTED != intersects[0].object) { 

      if (INTERSECTED) INTERSECTED.material.color.setHex(INTERSECTED.currentHex); 

      INTERSECTED = intersects[0].object; 
      INTERSECTED.currentHex = INTERSECTED.material.color.getHex(); 
      //INTERSECTED.material.emissive.setHex(0xff0000); 
      TWEEN.remove(tween); 
      tween = new TWEEN.Tween(INTERSECTED.material.color).onStart(function(){ 

     setTimeout(function(){ tween.stop() }, 1000); ///not good 
}).start();  
      .to({r: 0, g: 25, b: 155}, 10000) /// here set correct time 
      .easing(TWEEN.Easing.Quartic.In) 
      .start(); 

      setTimeout(function(){ tween.stop() }, 1000);/// will not work if you create anoter it that one second 

     } 
     else { 
      if(tween) tween.update(time); // bad 
     } 

    }

來源

2016-05-16 15:35:44 Martin

'function animate（）{ // TWEEN.update（）; // }'，做到了！謝謝！之前，我正在使用'function animate（）{ // tween.update（time）// '} – binoculars

這些是兩個不同的東西，補間是你的var，TWEEN是tween.js函數的全局對象。 – Martin

停止tween.js和three.js中的補間動畫

回答

相關問題