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 (前半段加速，后半段减速)