Estoy tratando de usar tween.js para encadenar algunas animaciones, sin embargo, encuentro que no funciona correctamente.
var car={position:{x:100}}; var tween1 = new TWEEN.Tween(car.position) .to({x: 105}, 1000).onComplete(() => {console.log("done 1 second")}); var tween2 = new TWEEN.Tween(car.position) .to({x: 110}, 1000).onComplete(() => {console.log("done 2 second")}); var tween3 = new TWEEN.Tween(car.position) .to({x: 115}, 1000).onComplete(() => {console.log("done 3 second")}); tween1.chain(tween2).chain(tween3).start() setTimeout(() => { console.log(1); },1000); setTimeout(() => { console.log(2); }, 2000); setTimeout(() => { console.log(3); }, 3000); function animate() { TWEEN.update(); window.requestAnimationFrame(animate); } animate(); <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>Y para que cada una de las 3 interpolaciones tome exactamente 1 segundo. Pero de alguna manera la biblioteca está fusionando interpolaciones después de la primera...
¿Alguien sabe cómo arreglar esto?
No hay ningún experto en tween.js aquí, pero parece que necesita encadenar tween3 a tween2 antes de encadenarlo a tween1
Entonces, en lugar de apagar
tween1.chain(tween2).chain(tween3).start()Usar
tween1.chain(tween2.chain(tween3)).start()Entonces la salida se convierte en
1 done 1 second 2 done 2 second 3 done 3 second var car={position:{x:100}}; var tween1 = new TWEEN.Tween(car.position) .to({x: 105}, 1000).onComplete(() => {console.log("done 1 second")}); var tween2 = new TWEEN.Tween(car.position) .to({x: 110}, 1000).onComplete(() => {console.log("done 2 second")}); var tween3 = new TWEEN.Tween(car.position) .to({x: 115}, 1000).onComplete(() => {console.log("done 3 second")}); tween1.chain(tween2.chain(tween3)).start() setTimeout(() => { console.log(1); },1000); setTimeout(() => { console.log(2); }, 2000); setTimeout(() => { console.log(3); }, 3000); function animate() { TWEEN.update(); window.requestAnimationFrame(animate); } animate(); <script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/18.6.4/tween.umd.js"></script>