Tween.js 动画的基本使用

心已赠人 2023-07-07 08:20 1阅读 0赞

### 一、安装及引用 ###

# yarn
    yarn add @tweenjs/tween.js
    # npm
    npm install @tweenjs/tween.js --save

引用

import Tween from '@tweenjs/tween.js'

### 二、基本使用 ###

import TWEEN from '@tweenjs/tween.js'
    const actionPos = { x:0, y:0}
    const myTween = new TWEEN.Tween(actionPos)
    myTwen.to({ x:100, y:200}, 5000)
    .onUpdate((pos)=>console.log(pos))
    .onComplete(()=>console.log('finish'))
    .start()
    
    
    function animate() { 
      window.requestAnimationFrame(animate)
      TWEEN.update()
    }
    animate()

### 三、常用方法 ###

**常用的回调**  
onStart // 动画开始时触发  
onStop // 动画调用stop()时触发  
onUpdate // 更新时画面时触发  
onComplete // 动画正常结束时触发

**一些重要的方法**  
tween.start() // 启动动画  
tween.delay(int) // 延时一个时间  
tween.stop() // 停止  
tween.repeat(10) // 设置重复10次， repeat(Infinity) 无限循环  
tween.chain(tween) // 链接下一个动画  
tween.easing(fun) // 设置动画函数  
// easing的fun可以是自定义的函数，包括一个输入参数，一个返回参数  
// Tween自带函数的变量公式为 tween.easing(TWEEN.Easing.函数名.类型名)  
/ TWEEN.Easing.Quadratic.In  
// TWEEN.Easing.Quadratic.Out

// tween自带的一些函数，如下：

<table> 
 <thead> 
  <tr> 
   <th>easing函数</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>Linear</td> 
   <td align="left">线性匀速运动效果</td> 
  </tr> 
  <tr> 
   <td>Quadratic</td> 
   <td align="left">二次方的缓动（t^2）</td> 
  </tr> 
  <tr> 
   <td>Cubic</td> 
   <td align="left">三次方的缓动（）</td> 
  </tr> 
  <tr> 
   <td>Quartic</td> 
   <td align="left">四次方的缓动（）</td> 
  </tr> 
  <tr> 
   <td>Quintic</td> 
   <td align="left">五次方的缓动</td> 
  </tr> 
  <tr> 
   <td>Sinusoidal</td> 
   <td align="left">正弦曲线的缓动（）</td> 
  </tr> 
  <tr> 
   <td>Exponential</td> 
   <td align="left">指数曲线的缓动（）</td> 
  </tr> 
  <tr> 
   <td>Circular</td> 
   <td align="left">圆形曲线的缓动（）</td> 
  </tr> 
  <tr> 
   <td>Elastic</td> 
   <td align="left">指数衰减的正弦曲线缓动（）</td> 
  </tr> 
  <tr> 
   <td>Back</td> 
   <td align="left">超过范围的三次方的缓动</td> 
  </tr> 
  <tr> 
   <td>Bounce</td> 
   <td align="left">指数衰减的反弹缓动</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <thead> 
  <tr> 
   <th>easing类型</th> 
   <th align="left">描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>In</td> 
   <td align="left">加速，先慢后快</td> 
  </tr> 
  <tr> 
   <td>Out</td> 
   <td align="left">减速，先快后慢</td> 
  </tr> 
  <tr> 
   <td>InOut</td> 
   <td align="left">前半段加速，后半段减速</td> 
  </tr> 
 </tbody> 
</table>

**全局方法**  
TWEEN.update() // 激活所有tween  
TWEEN.getAll() // 获取所有激活tween数组  
TWEEN.removeAll // 移除所有激活的tween  
TWEEN.add(tween) // 添加一个到激活的列表中  
TWEEN.remove(tween) // 移除一个