初次上手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