我正在嘗試使用 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/
有誰知道如何解決這一問題？
uj5u.com熱心網友回復：
不 補間.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>轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/416964.html
標籤：