tween.js介紹

Tween.js是一個可以產(chǎn)生平滑動畫效果的js庫，其官方地址為：https://github.com/tweenjs/tween.js/，可以將源碼下載后，可以在tween.js/dist/文件夾下找到相應(yīng)的js代碼，在HTML中進(jìn)行引用；也可以通過npm命令在終端控制臺中安裝tween.js模塊

npm install @tweenjs/tween.js然后在相應(yīng)的頁面引用Tween.js

import * as TWEEN from '@tweenjs/tween.js'

tween.js的使用方法

tween.js的使用非常簡單，只需要三步就可以完成一個補(bǔ)間動畫

1、在創(chuàng)建Tween實例的時候?qū)⑾胍薷牡淖兞孔鳛閰?shù)傳遞給Tween

2、使用TWEEN.Tween().to()方法，傳入結(jié)束點的最終值，以及動畫花費多少時間兩個參數(shù)

3、使用Tween().start()方法，啟動動畫，tween引擎就可以計算從開始動畫點到結(jié)束動畫點之間值，來產(chǎn)生平滑的動畫效果

tween.js的核心方法

.to()方法

控制補(bǔ)間的運動形式及方向 .to() , 當(dāng)tween啟動時，Tween.js將讀取當(dāng)前屬性值并 應(yīng)用相對值來找出新的最終值

.start(time) 方法

補(bǔ)間動畫啟動的方法， .start 方法接受一個參數(shù) time , 如果加入這個參數(shù),那么補(bǔ)間不會立即開始直到特定時刻才會開始

.stop()方法

關(guān)閉補(bǔ)間動畫 .stop() , 關(guān)閉這個正在執(zhí)行的補(bǔ)間動畫

.repeat()方法

使用該方法可以使動畫重復(fù)執(zhí)行，它接受一個參數(shù) , 描述需要重復(fù)多少次

.delay()方法

延遲執(zhí)行動畫的方法 .delay() , 接受一個參數(shù)用于控制延遲的具體時間，表示延遲多少時間后才開始執(zhí)行動畫

.pause()方法

暫停動畫.pause() ， 暫停當(dāng)前補(bǔ)間運動，與resume方法配合使用

.resume()方法

恢復(fù)動畫 .resume() ， 恢復(fù)這個已經(jīng)被暫停的補(bǔ)間運動

.yoyo() 方法

控制補(bǔ)間重復(fù)的模式 .yoyo() , 這個功能只有在使用 repeat 時才有效果 ,該動畫像悠悠球一樣來回運動 , 而不是重新開始

.update()方法

更新補(bǔ)間動畫 TWEEN.update() , 動態(tài)更新補(bǔ)間運動一般配合 window.requestAnimationFrame 使用

.chain()方法

鏈?zhǔn)窖a(bǔ)間動畫，當(dāng)我們順序排列不同的補(bǔ)間動畫時，比如我們在上一個補(bǔ)間結(jié)束的時候立即啟動另外一個補(bǔ)間動畫，使用 .chain() 方法來做。

//tweenB動畫在tweenA動畫完成后執(zhí)行
tweenA.chain(tweenB);

在一些情況下，可能需要將多個補(bǔ)間鏈接到另一個補(bǔ)間，以使它們（鏈接的補(bǔ)間）同時開始動畫：

tweenA.chain(tweenB,tweenC);

注意：調(diào)用 tweenA.chain（tweenB） 實際上修改了tweenA，所以tweenA總是在tweenA完成時啟動。 chain 的返回值只是tweenA，不是一個新的tween。

.getAll()方法

獲取所有的補(bǔ)間組 TWEEN.getAll()

.removeAll()方法

刪除所有的補(bǔ)間組 TWEEN.removeAll()

.add()方法

新增補(bǔ)間 TWEEN.add(tween) ，添加一個特定的補(bǔ)間 var tween=new TWEEN.Tween()

.remove()方法

刪除補(bǔ)間 TWEEN.remove(tween)，刪除一個特定的補(bǔ)間var tween=new TWEEN.Tween()

.Group()方法

新增一個補(bǔ)間組，
var Group=TWEEN.Group() , new TWEEN.Tween({ x: 1 }, Group) , 將已經(jīng)配置好的補(bǔ)間動畫進(jìn)行分組 , TWEEN.update()和TWEEN.removeAll() , 不會影響到已經(jīng)分好組的補(bǔ)間動畫

tween.js回調(diào)函數(shù)

.onStart（）補(bǔ)間動畫開始時執(zhí)行,只執(zhí)行一次

new TWEEN.Tween().onStart((obj)=>{}) , 補(bǔ)間開始時執(zhí)行,只執(zhí)行一次, 當(dāng)使用 repeat() 重復(fù)補(bǔ)間時,不會重復(fù)運行 ,
onStart((obj)=>{}) obj 補(bǔ)間對象作為第一個參數(shù)傳入

.onStop() 停止補(bǔ)間動畫時執(zhí)行

new TWEEN.Tween().onStop((obj)=>{}) , 當(dāng)通過 onStop() 顯式停止補(bǔ)間時執(zhí)行，但在正常完成時并且在停止任何可能的鏈補(bǔ)間之前執(zhí)行補(bǔ)間,onStop((obj)=>{}) obj 補(bǔ)間對象作為第一個參數(shù)傳入

.onUpdate() 每次更新時執(zhí)行

new TWEEN.Tween().onUpdate((obj)=>{}) , 每次補(bǔ)間更新時執(zhí)行，返回實際更新后的值， onUpdate((obj)=>{}) obj 補(bǔ)間對象作為第一個參數(shù)傳入

.onComplete() 補(bǔ)間動畫完成時執(zhí)行

new TWEEN.Tween().onComplete((obj)=>{}) , 當(dāng)補(bǔ)間正常完成（即不停止）時執(zhí)行 , onComplete((obj)=>{}) obj 補(bǔ)間對象作為第一個參數(shù)傳入

.onRepeat() 重復(fù)補(bǔ)間動畫時執(zhí)行

new TWEEN.Tween().onRepeat((obj)=>{}) , 當(dāng)補(bǔ)間動畫完成，即將進(jìn)行重復(fù)動畫的時候執(zhí)行 , onComplete((obj)=>{}) `obj 補(bǔ)間對象作為第一個參數(shù)傳入

TWEEN.Easing 緩動函數(shù)

tween.js為我們封裝好了常用的緩動動畫，如線性，二次，三次，四次，五次，正弦，指數(shù)，圓形，彈性，下落和彈跳等緩動函數(shù)
以及對應(yīng)的緩動類型：In (先慢后快) ；Out (先快后慢) 和 InOut (前半段加速，后半段減速)

常見的緩動動畫如下

• Linear：線性勻速運動效果；
• Quadratic：二次方的緩動（t^2）；
• Cubic：三次方的緩動（t^3）；
• Quartic：四次方的緩動（t^4）；
• Quintic：五次方的緩動（t^5）；
• Sinusoidal：正弦曲線的緩動（sin(t)）；
• Exponential：指數(shù)曲線的緩動（2^t）；
• Circular：圓形曲線的緩動（sqrt(1-t^2)）；
• Elastic：指數(shù)衰減的正弦曲線緩動；
• Back：超過范圍的三次方緩動（(s+1)t^3 – st^2）；
• Bounce：指數(shù)衰減的反彈緩動。
• 以上每個效果都分三個緩動類型，分別是：
• easeIn：從0開始加速的緩動，也就是先慢后快；
• easeOut：減速到0的緩動，也就是先快后慢；
• easeInOut：前半段從0開始加速，后半段減速到0的緩動。

在Threejs中使用Tween.js庫

繼續(xù)在前面章節(jié)的代碼基礎(chǔ)上進(jìn)行實現(xiàn)，由于我們是基于vue開發(fā)的，所以這里我們使用npm的方式安裝tween.js庫

在vue中安裝并引入tween.js庫

打開控制器，輸入npm install @tweenjs/tween.js進(jìn)行安裝,在components文件夾新建TweenView.vue文件，在該文件中引入tween.js
import * as TWEEN from '@tweenjs/tween.js'

初始化場景

在使用tween.js實現(xiàn)動畫之前，先將threejs的初始化環(huán)境搭建好，并創(chuàng)建一個立方體

<template>
  <div id="scene"></div>
</template>
<script setup>
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'  
import * as TWEEN from '@tweenjs/tween.js'
import { onMounted } from 'vue'

let scene,camera,renderer,controls 
onMounted(()=>{
  init()
}) 
function init() {
  initScene()
  initCamera()
  initAxesHelper()
  initLight()
  initRenderer()
  initControls() 
  initMesh() 
  animate()  
  window.addEventListener('resize',onWindowResize.bind(this))
}
// 初始化場景
function initScene() {
  scene = new THREE.Scene()
}
// 初始化相機(jī)
function initCamera() {
  camera = new THREE.PerspectiveCamera(75,window.innerWidth / window.innerHeight,0.1,1000)
  camera.position.set(0,2,2)  
}
// 輔助軸
function initAxesHelper() {
  const axesHelper = new THREE.AxesHelper(1)
  scene.add(axesHelper)
}
// 燈光
function initLight() {
  const hesLight = new THREE.HemisphereLight(0xffffff,0x444444)
  hesLight.intensity = 0.3
  scene.add(hesLight)

  const dirLight = new THREE.DirectionalLight()
  dirLight.position.set(5,5,5)
  scene.add(dirLight)

  const pointLight = new THREE.PointLight(0xffffff,1.5)
  pointLight.position.set(0,100,90)
  scene.add(pointLight)
  pointLight.color.setHSL(Math.random(),1,0.5)
}
// 初始化渲染器
function initRenderer() {
  renderer = new THREE.WebGLRenderer({antialias:true}) 
  renderer.setPixelRatio(window.devicePixelRatio)
  renderer.setSize(window.innerWidth,window.innerHeight)
  document.querySelector('#scene').appendChild(renderer.domElement)
  renderer.shadowMap.enable = true
}
// 初始化軌道控制器
function initControls() {
  controls = new OrbitControls(camera,renderer.domElement) 
  controls.minPolarAngle = 0 
  controls.maxPolarAngle = 80 / 360 * 2 * Math.PI
  controls.update()
}
// Mesh
function initMesh() {
      const boxGeometry = new THREE.BoxGeometry(0.3,0.3,0.3)
      const boxMaterial = new THREE.MeshPhongMaterial({color:0x00ff00})
      const boxMesh = new THREE.Mesh(boxGeometry,boxMaterial)
      scene.add(boxMesh)
} 
function animate() {
  const delta = clock.getDelta() 
  renderer.render(scene,camera)
  controls.update(delta) 
  requestAnimationFrame(animate) 
}
function onWindowResize() {
  camera.aspect = window.innerWidth / window.innerHeight
  camera.updateProjectionMatrix()
  renderer.setSize(window.innerWidth,window.innerHeight)
}
</script>
<style scoped>
</style>

實例化Tween對象

實例化Tween對象并將物體當(dāng)前的位置作為參數(shù)傳入該對象

const tween = new TWEEN.Tween(mesh.position)

使用.to()方法指定移動終點和時間

使用.to()方法指定移動的終點和時間

tween.to({x:3,y:0,z:0},2000)

調(diào)用.onUpdate()方法更新動畫，

調(diào)用.onUpdate()方法更新動畫，在回調(diào)函數(shù)中設(shè)置相機(jī)的.lookAt()方法，

tween.onUpdate(function(){ 
   camera.lookAt(0,0,0)
})

開啟動畫

使用.start()方法開啟動畫

tween.start()

刷新查看瀏覽器， 發(fā)現(xiàn)物體已經(jīng)按照我們給定的終點坐標(biāo)進(jìn)行了移動

給場景添加地面輔助線

為了更好的看到效果，給場景中添加地面輔助線，定義initGridHelper()方法，在init()函數(shù)中調(diào)用

// 輔助地面
function initGridHelper () {
  const gridHelper = new THREE.GridHelper(10,10)
  scene.add(gridHelper)
}

使用.chain()方法對多段動畫進(jìn)行串聯(lián)執(zhí)行

繼續(xù)對上面的物體運動進(jìn)行研究，我們在物體移動到指定位置后，再給定一個目標(biāo)點位置，使其繼續(xù)移動；

新建一個tween2對象，仍然將mesh.position作為參數(shù)傳入，調(diào)用tween2.to方法，指定終點坐標(biāo)和時間

然后通過調(diào)用.chain()方法，將tween2作為參數(shù)傳遞給tween.chain()方法，這樣tween在執(zhí)行完第一段代碼后，會接著執(zhí)行tween2的代碼，實現(xiàn)多段動畫的連續(xù)執(zhí)行

const tween2 = new TWEEN.Tween(mesh.position)
tween2.to({x:3,y:0,z:3},2000)
tween.chain(tween2)
tween.start()

使用tween執(zhí)行縮放動畫

tweenjs不僅僅能實現(xiàn)移動動畫，它能實現(xiàn)很多動畫功能，這里我們接著上面的動畫在物體移動到tween2指定的終點時，再對齊進(jìn)行一個縮放動畫
我們先定義一個對象，里面給一個參數(shù)s為1，代表當(dāng)前的縮放比例是1

const scaleParam = { s:1}

我們創(chuàng)建一個新的tween3對象然后我們創(chuàng)建一個新的tween3對象，將上面的scaleParam 作為參數(shù)傳入

const tween3 = new TWEEN.Tween(scaleParam)

調(diào)用.to方法調(diào)用tween3.to()方法，將對象s設(shè)置為10，時間設(shè)置為2000

tween3.to({s:10},2000)

調(diào)用.onUpdate()方法調(diào)用.onUpdate()方法，在.onUpdate()方法的回調(diào)函數(shù)中設(shè)置mesh在x軸的縮放值為s

tween3.onUpdate(function(){
  mesh.scale.x = scaleParam.s
})

調(diào)用.chain()方法調(diào)用tween2.chain()方法，將tween3作為參數(shù)傳入，表示tween2動畫執(zhí)行完后執(zhí)行tween3動畫

tween2.chain(tween3)
tween.start()

刷新瀏覽器，可以看到物體按照我們預(yù)期的效果實現(xiàn)了動畫

使用緩動動畫

使用緩動動畫可以是我們的動畫看起來更真實自然，前面講過，tweenjs已經(jīng)為我們封裝了常見的緩動動畫，我們使用使只需要調(diào)用就可以了，常見的緩動動畫曲線如下圖所示

給立方體運動的動畫添加緩動動畫我們可以給上面的立方體添加緩動動畫，使其看起來更真實，我們在立方體的第一段動畫(tween)和第二段動畫(tween2)時讓其先快后慢

 const tween = new TWEEN.Tween(mesh.position)
      tween.to({x:3,y:0,z:0},2000)
      tween.onUpdate(function(){ 
        camera.lookAt(0,0,0)
      }).easing(TWEEN.Easing.Sinusoidal.InOut)
      const tween2 = new TWEEN.Tween(mesh.position)
      tween2.to({x:3,y:0,z:3},2000).easing(TWEEN.Easing.Sinusoidal.InOut)
      tween.chain(tween2)
      
      const scaleParam = { s:1}
      const tween3 = new TWEEN.Tween(scaleParam)
      tween3.to({s:10},2000)
      tween3.onUpdate(function(){
        mesh.scale.x = scaleParam.s
      })
      tween2.chain(tween3)
      tween.start()

刷新瀏覽器看效果，符合我們的要求

好了，關(guān)于tweenjs和threejs結(jié)合創(chuàng)建動畫就先說到這里，其實關(guān)于tween和threejs結(jié)合的動畫還有很多，比如可以結(jié)合tween實現(xiàn)物體顏色的變化、透明度的變化等，具體各位小伙伴可以自己摸索。

總結(jié)

到此這篇關(guān)于Threejs與Tween.js結(jié)合創(chuàng)建動畫的文章就介紹到這了,更多相關(guān)Threejs與Tween.js創(chuàng)建動畫內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評論