我试图使用tween.js来链接一些动画,但我发现它不能正常工作。
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>
3个粗花呢中的每一个都需要1秒的时间。但不知怎么的,图书馆在第一次。。。。
http://jsfiddle.net/6gfkenw2/
有人知道怎么解决这个问题吗?
这里没有tweetn.js专家,但似乎需要先将tween3
链接到tween2
,然后再将其链接到tween1
因此关闭
tween1.chain(tween2).chain(tween3).start()
使用
tween1.chain(tween2.chain(tween3)).start()
所以输出变成
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>