ThreeJS系列 - 补间工具tween.js

华兴
4,576 阅读4分钟

panorama1222222.gif

tween.js 在它的 GitHub 上对内容方法描述上的描述真的不尽人意，只有一份英文的指南和简单的功能描述，但还好有大佬把指南翻译成了中文这样学起来才轻松了些, tween.js 包里面有一些官方提供的实例但对于初学者的我来说真的不够直观 , 这里我把官方的实例和方法进行了整合,写了份 vue + three.js + tween.js 的动态案例供大家参考参考 😄

  • tween.js 是什么?

    tween.js是一款可生成平滑动画效果的js动画库 , 你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果 , tween.js不仅仅可以在HTML页面中使用也可以直接用于three.js的mesh中用于控制模型的动画效果简单而又方便

  • 起步 vue 中创建一个简单的动画案例

npm i @tweenjs/tween.js@^18 //下载tween.js

const TWEEN = require('@tweenjs/tween.js') //vue 中定义一个TWEEN的常量

...
addTweenEsa(mesh) { //核心代码 mesh 是使用three.js 建立的一个网格模型
	this.EsaTween = new TWEEN.Tween(mesh.position)
	.to({x: 30,y: 0,z: 30}, 2000) //改变当前模型的位置 
	.delay(1000) //开始时的延迟
	.yoyo(true) //是否开启yoyo循环
	.easing(TWEEN.Easing.Elastic.InOut) //运动曲线
	.repeat(Infinity) //重复次数
	 this.EsaTween.start() //开启动画
},
...

  • 补间功能方法

    • start
      开启补间动画 , new TWEEN.Tween().start(time) , start 方法接受一个参数 time , 如果加入参数,那么补间不会立即开始直到特定时刻才会开始

    • stop
      关闭补间动画 new TWEEN.Tween().stop() , 关闭这个正在执行的补间动画

    • repeat
      控制补间重复的次数 new TWEEN.Tween().repeat(), repeat 它接受一个参数 , 描述第一个补间完成后 需要多少次重复

    • yoyo
      控制补间重复的模式 , new TWEEN.Tween().yoyo() , 这个功能只有在使用 repeat 时才有效果 , 补间的 行，为将像悠悠球一样来回运动 , 而不是重新开始

    • delay
      控制补间开始前的延迟 new TWEEN.Tween().delay() , 补间开始之前的延迟时间接受一个参数用于控制具 体时间

    • pause
      暂定补间动画 new TWEEN.Tween().pause() ， 暂停当前补间运动

    • resume 恢复补间动画 new TWEEN.Tween().resume() ， 恢复这个已经被暂停的补间运动

    • to
      控制补间的运动形式及方向 new TWEEN.Tween().to() , 当tween启动时，Tween.js将读取当前属性值并 应用相对值来找出新的最终值

  • 补间操作方法

    • update
      更新补间动画 TWEEN.update() , 动态更新补间运动一般配合 window.requestAnimationFrame 使用

    • getAll
      获取所有的补间组 TWEEN.getAll()

    • removeAll
      删除所有的补间组 TWEEN.removeAll()

    • add
      新增补间 TWEEN.add(tween) (tween) 添加一个特定的补间 var tween=new TWEEN.Tween()

    • remove
      删除补间 TWEEN.remove(tween) (tween) 删除一个特定的补间 var tween=new TWEEN.Tween()

    • Group 新增一个补间组 var Group=TWEEN.Group() , new TWEEN.Tween({ x: 1 }, Group) , 将已经配置 好的补间进行分组 , TWEEN.update()和TWEEN.removeAll() , 不会影响到已经分好组的补间

  • 补间回调函数

    • onStart()
      new TWEEN.Tween().onStart((obj)=>{}) , 补间开始时执行,只执行一次, 当使用 repeat() 重复补间 时,不会重复运行 , onStart((obj)=>{}) obj 补间对象作为第一个参数传入

    • onStop()
      new TWEEN.Tween().onStop((obj)=>{}) , 当通过 onStop() 显式停止补间时执行，但在正常完成时并且在停止任何可能的链补间之前执行补间',onStop((obj)=>{}) obj 补间对象作为第一个参数传入

    • onUpdate()
      new TWEEN.Tween().onUpdate((obj)=>{}) , 每次补间更新时执行，返回实际更新后的值， onUpdate((obj)=>{}) obj 补间对象作为第一个参数传入

    • onComplete()
      new TWEEN.Tween().onComplete((obj)=>{}) , 当补间正常完成（即不停止）时执行 , onComplete((obj)=>{}) obj 补间对象作为第一个参数传入

  • 缓动函数：TWEEN.Easing

    tween.js提供了一些现成的缓动函数，例如 线性，二次，三次，四次，五次，正弦，指数，圆形，弹性，下落和弹跳，然后还有对应的缓动类型：In (先慢后快) Out (先快后慢) 和 InOut (前半段加速，后半段减速) , 这里我把这些缓动函数整理成了动态实例放在了我的 GitHub 中 ，官方提供的包里面也有实例路径是 : tween.js-master\examples\03_graphs.html 这里介绍了所有的缓动函数 ,当然我的图也是根据官方提供的做的 😋

panorama33333.gif

  • 总结

本文只是简单的介绍了补间工具的用法 , 更加深入的用法等以后有空了做出实例之后在来慢慢介绍 😄

本文 Gitee 示例地址
本文 GitHub 示例地址
tween.js 中文使用指南
tween.js GitHub地址
tween.js 动画效果文章

  • 结束语

现在感觉做前端是真的难 , vue3 ,vite 各种东西不停的冒出来，不学就跟不上时代 ，学了就要考虑重构以前的代码, 想想都头疼 ，但是也没什么办法毕竟落后就要挨打，我们只能不停的前进 😂 ，这篇文章只是总结了常用的功能和方法 ，本人才疏学浅有什么不足的地方还请多多包涵。

avatar
文章
阅读
粉丝