記錄tweenjs踩坑

初次上手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;避免問題滾雪球…