Tween.js not chaining properly-CodePudding

I'm trying to use tween.js to chain some animations, however I find it is not working properly.

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>

And for each of the 3 tweens to take exactly 1 second. But somehow the library is merging tweens after the first....

http://jsfiddle.net/6gfkenw2/

Does anyone know how to fix this?

CodePudding user response：

No tween.js expert here, but it seems like you need to chain tween3 to tween2 before chaining that to tween1

So instead off

tween1.chain(tween2).chain(tween3).start()

Use

tween1.chain(tween2.chain(tween3)).start()

So the output becomes

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>