初次上手tweenjs,試了很多示例代碼都不生效,結果在html中生效,在vue3的項目中怎么都不生效
<!DOCTYPE html>
<html lang="en"><head><title>Tween.js / simplest possible example!</title><meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /><link href="css/style.css" media="screen" rel="stylesheet" type="text/css" /></head><body><div id="element" style="position: absolute; left: 0; top: 0; width: 50px; height: 50px; background: red"></div><script src="https://cdnjs.cloudflare.com/ajax/libs/tween.js/23.1.3/tween.umd.js"></script><script type="module">var element = document.getElementById("element");let tween = new TWEEN.Tween({ x: 0, y: 0 }).to({ x: 100, y: 100 }, 1000).onUpdate(function (object) {element.style.left = object.x + "px";element.style.top = object.y + "px";console.log("onUpdate");});// TWEEN.add(tween);//舊版本需要,后來的版本中start方法就可以替代add方法tween.start(); // 開始動畫,雖然這里不是必須的,但在某些情況下手動開始可以控制動畫的啟動時機。animate();function animate(time) {requestAnimationFrame(animate);tween.update(time);}</script></body>
</html>
最后排查發現是版本的問題,cdn引入的23版本,而在我的vue3項目中安裝的最新版本"^25.0.0",
切換23的cdn后發現動畫生效了。
原因是在25版本中TWEEN.update方法做了修改,在源碼中查看發現update原方法被廢棄,導致不能使用,
令我疑惑的是,源碼中還是有update方法的,為什么調用不起
在我的頁面使用是這樣的最后切換了版本,動畫才生效
pnpm install @tweenjs/tween.js@18.6.4