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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若转载,请注明出处:http://www.pswp.cn/bicheng/85742.shtml
繁体地址,请注明出处:http://hk.pswp.cn/bicheng/85742.shtml
英文地址,请注明出处:http://en.pswp.cn/bicheng/85742.shtml

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PINA开源程序用于高级建模的 Physics-Informed 神经网络

​一、软件介绍 文末提供程序和源码下载 PINA 是一个开源 Python 库&#xff0c;旨在简化和加速科学机器学习 &#xff08;SciML&#xff09; 解决方案的开发。PINA 基于 PyTorch、PyTorch Lightning 和 PyTorch Geometry 构建&#xff0c;提供了一个直观的框架&#xff0c;用…

一种对外IP/MAC地址收敛的软硬件系统

----------原创不易&#xff0c;欢迎点赞收藏。广交嵌入式开发的朋友&#xff0c;讨论技术和产品------------- 今天发一篇五年前的文章&#xff0c;不调单板。对以太网和交换片的较多理解&#xff0c;对系统级的优化。 大部分的网络设备&#xff0c;都由多种单板组成&#x…

【flink】 flink 读取debezium-json数据获取数据操作类型op/rowkind方法

flink 读取debezium-json数据获取数据操作类型op/rowkind方法。 op类型有c&#xff08;create&#xff09;,u&#xff08;update&#xff09;,d&#xff08;delete&#xff09; 参考官网案例&#xff1a;此处的"op": "u",就是操作类型。 {"before&qu…

某手游cocos2dlua反编译

一、获取加载的luac文件 通过frida hook libccos2dlua.so 的luaL_loadbuffer函数对luac进行dump js代码如下&#xff0c;得到dump后的lua文件 // 要加载的目标库名 var targetLibrary "libcocos2dlua.so"; var dlopen Module.findExportByName(null, "dlope…

`toRaw` 与 `markRaw`:Vue3 响应式系统的细粒度控制

&#x1f90d; 前端开发工程师、技术日更博主、已过CET6 &#x1f368; 阿珊和她的猫_CSDN博客专家、23年度博客之星前端领域TOP1 &#x1f560; 牛客高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》、《前端求职突破计划》 &#x1f35a; 蓝桥云课签约作者、…

Python文件迁移之Shutil库详解

Shutil是一个Python内置的用来高效处理文件和目录迁移任务的库。Shutil不仅支持基本的文件复制、移动和删除操作&#xff0c;还具备处理大文件、批量迁移目录、以及跨平台兼容性等特性。通过使用Shutil&#xff0c;我们可以更加轻松地实现文件系统的管理和维护&#xff0c;本文…

【服务器R环境架构】基于 micromamba下载 R 库包

目录 准备工作&#xff1a;下载并安装R环境下载并安装R环境方式1&#xff1a;下载 .tar.bz2 压缩包进行解压执行&#xff08;官方推荐&#xff09;方式2&#xff1a; 创建并激活R环境 下载R库包安装CRAN包在 micromamba 中安装 GitHub 包&#xff08;如 BPST&#xff09; 参考 …

基于 Apache POI 实现的 Word 操作工具类

基于 Apache POI 实现的 Word 操作工具类 这个工具类是让 AI 写的&#xff0c;已覆盖常用功能。 如不满足场景的可以让 AI 继续加功能。 已包含的功能&#xff1a; 文本相关&#xff1a; 添加文本、 设置字体颜色、 设置字体大小、 设置对齐方式、 设置字符间距、 设置字体加粗…

时间序列预测、分类 | 图神经网络开源代码分享(上)

本期结合《时间序列图神经网络(GNN4TS)综述》&#xff0c;整理了关于图神经网络在时间序列预测、分类等任务上的开源代码和学习资料以供大家学习、研究。 参考论文&#xff1a;《A Survey on Graph Neural Networks for Time Series: Forecasting, Classification, Imputation,…

Vue 添加水印(防篡改: 删除水印元素节点、修改水印元素的样式)

MutationObserver_API: 观察某一个元素的变化// index.vue<template><div class="container"><Watermark text="版权所有" style="background: #28c848"><!-- 可给图片、视频、div...添加水印 --><div class=&quo…

如何处理开发不认可测试发现的问题

解决方案 第一步&#xff1a;收集确凿证据 确保有完整的复现结果准备详细的记录材料&#xff1a; 截屏录屏操作步骤记录 带着这些证据与开发人员进行沟通 第二步&#xff1a;多角度验证 如果与开发人员沟通无果&#xff1a; 竞品分析&#xff1a;查看市场上同类产品如何…

linux生产环境下根据关键字搜索指定日志文件命令

grep -C 100 "error" server.log 用于在 server.log 文件中查找包含 “error” 的行&#xff0c;并同时显示该行前后100行的上下文。这是排查日志问题的常用技巧&#xff0c;解释一下&#xff1a; 命令参数详解 grep&#xff1a;文本搜索工具&#xff0c;用于在文件…

用vue和echarts怎么写一个甘特图,并且是分段式瀑布流

vue echarts 甘特图功能 index.vue <template><div ref"echart" id"echart" class"echart"></div> </template><script setup>import { nextTick, onMounted, ref } from "vue";import * as echarts f…

Pandas使用教程:从入门到实战的数据分析利器

一、Pandas基础入门 1.1 什么是Pandas Pandas是Python生态中核心的数据分析库&#xff0c;提供高效的数据结构&#xff08;Series/DataFrame&#xff09;和数据分析工具。其名称源于"Panel Data"&#xff08;面板数据&#xff09;和"Python Data Analysis"…

NuttX Socket 源码学习

概述 NuttX 的 socket 实现是一个精心设计的网络编程接口&#xff0c;提供了标准的 BSD socket API。该实现采用分层架构设计&#xff0c;支持多种网络协议族&#xff08;如 TCP/IP、UDP、Unix域套接字等&#xff09;&#xff0c;具有良好的可扩展性和模块化特性。 整体架构设…

基于YOLO的语义分割实战(以猪的分割为例)

数据集准备 数据集配置文件 其实语义分割和目标检测类似&#xff0c;包括数据集制备、存放格式基本一致像这样放好即可。 然后需要编写一个data.yaml文件&#xff0c;对应的是数据的配置文件。 train: C:\图标\dan\语义分割pig\dataset\train\images #绝对路径即可 val: C:\…

钉钉智能会议室集成指纹密码锁,临时开门密码自动下发

在当今快节奏的工作环境中&#xff0c;会议室的高效管理和使用成为了企业提升工作效率的关键一环。湖南某知名企业近期成功升级了原有使用的钉钉智能会议室系统&#xff0c;并配套使用了启辰智慧联网指纹密码锁&#xff0c;实现了会议室管理的智能化升级&#xff0c;提升了会议…

C++讲解—类(1)

类 在 C 中&#xff0c;类是一个关键概念&#xff0c;凭借其封装和继承的特性&#xff0c;能够助力程序员之间实现高效的分工协作&#xff0c;共同完成复杂的大型项目。我们先从最简单的概念入手&#xff0c;再进行更深层次的了解和应用。 1. 类的定义 类是用户自定义的一种…

什么是Hadoop Yarn

Hadoop YARN&#xff1a;分布式集群资源管理系统详解 1. 什么是YARN&#xff1f; YARN&#xff08;Yet Another Resource Negotiator&#xff09;是 Apache Hadoop 生态系统中的资源管理和作业调度系统&#xff0c;最初在 Hadoop 2.0 中引入&#xff0c;取代了 Hadoop 1.0 的…

项目开发中途遇到困难的解决方案

1. 正视困难&#xff0c;避免逃避 开发遇阻时&#xff0c;退缩会带来双重损失&#xff1a;既成为"失败者逃兵"&#xff0c;又损害职业信心1。 行动建议&#xff1a; 立即向团队透明化问题&#xff08;如进度延迟、技术瓶颈&#xff09;&#xff0c;避免问题滚雪球…