ThreeJS:补间动画与Tween.JS

补间动画

        补间动画指的是做FLASH动画时,在两个关键帧中间需要做“补间动画”,才能实现图画的运动;插入补间动画后两个关键帧之间的插补帧是由计算机自动运算而得到的。

——摘自《百度百科:补间动画_百度百科》

Tween.js

        Tween.js的GitHub项目地址:GitHub - tweenjs/tween.js: JavaScript/TypeScript animation engine,

        官网文档地址:tween.js 用户指南 | tween.js。

        利用ThreeJS自带的Tween.js可以很方便的实现补间动画,直接导入即可使用,

import { Tween } from 'three/examples/jsm/libs/tween.module.js'; //Tween.js

Tween基本使用

//TODO:添加1个球体
const ball1 = new THREE.SphereGeometry(1);
const ballMaterial = new THREE.MeshBasicMaterial({color:0xffff00});
const ballMesh1 = new THREE.Mesh(ball1,ballMaterial);
ballMesh1.geometry.scale(0.5,0.5,0.5);
ballMesh1.position.set(0,0,0);scene.add(ballMesh1);

        假设现在创建了一个小球,我们要使用Tween为其设置动画效果,

//TODO:Tween.js补间动画
const tween = new TWEEN.Tween(ballMesh1.position);
tween.to({x:4},1000).onUpdate(function(vector3Position){//监听位置变化console.log(vector3Position);});
//设置重复次数-[2次]
tween.repeat(2);
//设置重复次数-[无数次]
// tween.repeat(Infinity);
//设置循环往复
tween.yoyo(true);
//设置延迟执行时间
tween.delay(1000);//在animate循环渲染函数中调用updateTween
function updateTween(){tween.update();
}

        以上代码,就可实现ballMesh小球沿着X轴,循环往复运动2次的动画效果。

Tween缓动函数

缓动函数:用于表示自定义参数随时间变化的速率。

        Tween.js提供的缓动函数可参考:Tween.js / graphs,

        通过使用缓动函数,可以模拟物体的匀变速运动(加速/减速)运动。

        例如,使用缓动函数Quadratic.In,来模拟物体的匀加速运动,修改上述代码如下,

//TODO:Tween.js补间动画
const tween = new TWEEN.Tween(ballMesh1.position);
tween.to({x:4},1000).onUpdate(function(vector3Position){//监听位置变化console.log(vector3Position);});
//设置重复次数-[2次]
// tween.repeat(2);
//设置重复次数-[无数次]
tween.repeat(Infinity);
//设置循环往复
tween.yoyo(true);
//设置延迟执行时间-【可以避免动画的跳动现象】
tween.delay(100);
//设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.In);function updateTween(){TWEEN.update();
}

Tween链接补间

        当你按顺序排列不同的补间时,事情会变得更有趣,例如在上一个补间结束的时候立即启动另外一个补间。我们称此为链接补间,它是通过 chain 方法完成的。因此,要使 tweenB 在 tweenA 完成后开始:

tweenA.chain(tweenB)

        或者,可以创造一个无限的链式,tweenA 完成时开始 tweenBtweenB 完成时开始 tweenA

tweenA.chain(tweenB)
tweenB.chain(tweenA)

        在其他情况下,你可能希望将多个补间链接到另一个补间,使它们(链接的补间)都同时开始动画:

tweenA.chain(tweenB, tweenC)

Warning 调用 tweenA.chain(tweenB) 实际上修改了 tweenA,所以 tweenB 总是在 tweenA 完成时启动。 chain 的返回值只是 tweenA,不是一个新的 tween。

        例如:我们使用chain链接补间的方式,实现上面的循环往复运动,

//TODO:Tween.js补间动画
const tween = new TWEEN.Tween(ballMesh1.position);
tween.to({x:4},1000).onUpdate(function(vector3Position){//监听位置变化console.log(vector3Position);});
//设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.In);const tweenBack = new TWEEN.Tween(ballMesh1.position);
tweenBack.to({x:0,},1000);
//设置缓动函数
tween.easing(TWEEN.Easing.Quadratic.Out);//创建补间动画
tween.chain(tweenBack);
tweenBack.chain(tween);//启动动画tween
tween.start();function updateTween(){TWEEN.update();
}

        通过以上代码,也可以实现yoyo()的效果。

Tween动画生命周期回调函数

        利用Tween.js构建的动画包含:开始、更新、停止、完成几个生命周期阶段,Tween.js也提供了对应的生命周期回调函数,如下图所示,

Tween.js最佳性能实践

        虽然 Tween.js 试图靠自己发挥性能,但没有什么能阻止你以反性能的方式使用它。 以下是一些在使用 Tween.js 时(或通常在 Web 中制作动画时)可以避免拖慢项目速度的方法。

使用高性能的 CSS

        当你尝试为页面中元素的位置设置动画时,最简单的解决方案是为 top 和 left 样式属性设置动画,如下所示:

var element = document.getElementById('myElement')
var tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {element.style.top = object.top + 'px'element.style.left = object.left + 'px'
})

        但这确实效率低下,因为更改这些属性会强制浏览器在每次更新时重新计算布局,这是一项非常消耗性能的操作。你应该使用 transform,它不会使布局无效,并且在可能的情况下也会进行硬件加速,如下所示:

var element = document.getElementById('myElement')
var tween = new TWEEN.Tween({top: 0, left: 0}).to({top: 100, left: 100}, 1000).onUpdate(function (object) {element.style.transform = 'translate(' + object.left + 'px, ' + object.top + 'px);'
})

        如果你想了解更多关于高性能的 CSS,看看这篇文章。

        但是,如果你的动画需求就这么简单,最好只使用 CSS 动画或过渡(在适用的情况下),这样浏览器就可以尽可能地进行优化。 当你的动画需要涉及复杂的操作时,Tween.js 是非常有用,也就是说,你需要将多个补间同步在一起,在一个完成后开始,循环多次,具有不是使用 CSS 而是使用 Canvas 渲染的图形或 WebGL 等等。

对垃圾收集器(别名 GC)

        如果你使用 onUpdate 回调,你需要非常小心你放在它上面的东西。 这个函数每秒会被调用很多次,所以如果你在每次更新时都做代价高昂的操作,你可能会阻塞主线程并导致可怕的卡顿,或者——如果你的操作涉及内存分配,你最终会得到 垃圾收集器运行过于频繁,也会导致卡顿。 所以不要做这两件事。 保持你的 onUpdate 回调非常轻量级,并确保在开发时也使用内存分析器。

疯狂的补间

        这是你可能不经常使用的东西,但你可以在 Tween.js 之外使用补间方程式。 毕竟,它们只是函数。 因此,你可以使用它们来计算平滑曲线作为输入数据。 

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

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

相关文章

xCode升级后: Library ‘iconv2.4.0’ not found

报错信息: targets 选中 xxxNotification: Build Phases ——> Link Binary With Libraries 中,移除 libiconv.2.4.0.tbd libiconv.2.4.0.dylib 这两个库(只有一个的移除一个就好)。 然后重新添加 libiconv.tbd 修改完…

5G基础知识记录

5G接入网协议栈规范 [4G&5G专题-24]:架构-5G接入网协议栈规范 5G NR协议栈 5G NR协议栈及功能介绍 PDU会话 5G网络学习(三)——大白话讲解PDU会话(未完待续) NAS层 AS(接入层)和NAS(非接入层) RRC下的NAS层…

QT设计模式:桥接模式

基本概念 桥接模式是一种结构型设计模式,它将抽象部分与它的实现部分分离,使得它们可以独立地变化,而不会相互影响。 需要实现的结构如下: 抽象部分(Abstraction):定义了抽象类的接口&#x…

RT-Thread GD25Qxx驱动调试

目录 1. SPI Flash芯片1.1 GD25Q1281.2 硬件连接2. 添加drv_spi_gd25q128.c驱动文件2.1 Kconfig中添加配置选项2.2 添加drv_spi_gd25q128.c编译3. 封装gd25q128读写接口4. gd25q128 读写验证1. SPI Flash芯片 1.1 GD25Q128 GD25Q128ESIG 是一款由兆易创新(GigaDevice)公司生…

(代码以上传,超级详细)面试必备算法题----Leeecode290单词规律

文章目录 概要题目要求测试and提交结果技术细节 概要 来自Leecode ​ 代码已上传)仓库,需要测试实例和其他题型解决,可以去自行浏览 点击这里进入仓库领取代码喔!顺便点个star给原子加油吧! ​ 题目要求 使用哈希表 …

GD32F103RCT6/GD32F303RCT6(9)高级定时器互补PWM波输出实验

本文章基于兆易创新GD32 MCU所提供的2.2.4版本库函数开发 后续项目主要在下面该专栏中发布: 手把手教你嵌入式国产化_不及你的温柔的博客-CSDN博客 感兴趣的点个关注收藏一下吧! 电机驱动开发可以跳转: 手把手教你嵌入式国产化-实战项目-无刷电机驱动&am…

在线教育系统在线网校报价,培训机构是怎样招聘老师的?流程是什么?

招生是培训机构的一大难题,但招不来老师,招不到好老师却也是培训机构面临的一个更为严峻的问题,没有老师,教学工作就展不开,没有老师,学生就留不住。培训学校的人员招聘不要等缺失时才去招聘,要…

【设计模式】之观察者模式

系列文章目录 【设计模式】之装饰器模式【设计模式】之工厂模式(三种)【设计模式】之工厂模式(三种) 前言 今天给大家介绍另一种设计模式--观察者模式,有了解webscoket实现原理的小伙伴应该对这个设计模式不陌生。不清…

微服务核心01-Maven【项目管理工具】基础

一、Maven 简介 1.1 传统项目管理: 1.2 Maven 的作用 项目构建:提供标准的、跨平台的自动化项目构建方式。依赖管理:管理项目依赖的资源(jar 包),避免资源间的版本冲突问题统一开发结构:提供标…

web前端笔记8

8. Less的使用 Less (Leaner Style Sheets 的缩写) 是一门向后兼容的 CSS 扩展语言。Less 是一门CSS预处理语言,它扩充了CSS语言,增加了诸如变量、混合(mixin)、函数等功能,让CSS更易维护、方便制作主题、扩充。Less可以运行在Node.js或浏览器端。LESS由Alexis Sellier于…

Web LLM 攻击实验:利用 LLM API 实现 SQL 注入

前言 Web LLM 攻击 各组织都在急于集成大型语言模型 (LLM),以改善其在线客户体验。这使他们面临 Web LLM 攻击,这些攻击利用模型对攻击者无法直接访问的数据、API 或用户信息的访问权限。例如,攻击可能: 检索 LLM 有权访问的数…

【valse 2024】会议内容汇总(持续更新)

系列文章目录 提示:更新中,一周左右更新完毕。需要具体课件的可私信 文章目录 系列文章目录开幕式主旨报告-1:大模型时代的机遇和挑战主旨报告-2:以深度学习框架为牵引促进自主 AI生态发展主旨报告-3:从洞穴的影子到智能的光辉--连接和交互方式的改变塑造…

el-table-column表格匹配字典数据

根据字典值匹配 列的值 优点就是可维护性强 改完字典就会生效 如果写死需求变更难以维护 <el-table v-loading"loading" :data"processList" selection-change"handleSelectionChange"><el-table-column type"selection" wid…

别出心裁的自动化网页数据采集:Chrome插件和mitmproxy

别出心裁的自动化网页数据采集&#xff1a;Chrome插件和mitmproxy 前言 在信息时代&#xff0c;数据已成为决策的关键。传统的数据采集方法往往依赖于手动操作或简单的自动化脚本&#xff0c;这限制了数据的时效性和精确性。为了克服这些限制&#xff0c;本文介绍了一种结合C…

文件批量移动:按路径名称指引,高效文件管理与批量归类实战

在数字化时代&#xff0c;文件批量移动成为了一项至关重要的技能&#xff0c;它能够帮助我们高效地管理和归类大量的文件。通过按路径名称指引进行文件批量移动&#xff0c;我们可以使文件组织更加有序&#xff0c;提高文件检索的速度&#xff0c;从而提升工作效率。 一、明确路…

Linux: 高CPU使用率的一种情况:内存不够用

文章目录 问题swapd的作用原因是问题 有一台jenkins服务器,在安装完成之后,一开始ssh访问还可以,后续再访问,就出现严重的变慢现象。 从下面的的top命令,可以看到,CPU的使用率几乎全被system使用,而idle的就是0。 从列表里看,kswapd0占用的最多,达到了47.5%。而且可以…

多线程学习Day09

10.Tomcat线程池 LimitLatch 用来限流&#xff0c;可以控制最大连接个数&#xff0c;类似 J.U.C 中的 Semaphore 后面再讲 Acceptor 只负责【接收新的 socket 连接】 Poller 只负责监听 socket channel 是否有【可读的 I/O 事件】 一旦可读&#xff0c;封装一个任务对象&#x…

【建议收藏】CSP-J/S信奥赛,小白报名教程!

✅ 信奥介绍 信息学奥赛是五大学科&#xff08;数学、物理、化学、生物、信息学&#xff09;奥林匹克竞赛中唯一一个可以贯穿小学、初中、高中的特长生项目。由中国计算机学会主办&#xff0c;主要考察信息学&#xff0c;即编程的相关知识和能力。 ✅ 报名流程 &#x1f449;登…

智能绘画系统源码系统 后台自由设置会员套餐 带网站的安装包以及安装部署教程

在当今数字化与智能化快速发展的时代&#xff0c;艺术与技术正以前所未有的速度相互融合。为了满足广大绘画爱好者和专业艺术家的需求&#xff0c;我们精心打造了一款智能绘画系统源码系统。该系统不仅具备高度的智能化特性&#xff0c;还提供了丰富的后台管理功能&#xff0c;…

JS中递归是什么原理

JavaScript中的递归&#xff08;Recursion&#xff09;是一种编程技巧&#xff0c;它允许函数直接或间接地调用自身。递归函数在解决一些问题时特别有用&#xff0c;特别是那些可以分解为更小、相似子问题的问题。递归的基本原理包括两个关键部分&#xff1a; 1&#xff0c;基…