最近在three.js中用到tween.js,所以就做一個總結
tween.js是一個補間動畫庫碳默,我們可以用來做規(guī)定時間內的對象屬性的數值變化心包,而且起始值到最終值的變化是自動變化的
可在three.js官網的例子查看tween.js在three.js中的應用
代碼說明:
var position = { x: 100, y: 0 }//假設一個位置,坐標為(100,0)
var tween = new TWEEN.Tween(position).to({x:200},1000);//就會在1000毫秒內x會從100移動到200
而啟動動畫還需要兩個函數:
tween.start()
TWEEN.update();
tween.js的默認動畫運動軌跡是直線军掂,所以在camera上應用在圓周運動凸主,就需要改變tween.js的運動軌跡恍飘,這篇文章Three.js自定義相機旋轉動畫:沿圓弧旋轉可以作為參考
tween.js除了提供.to()
和.start()
绢彤,還提供了以下幾個回調函數來設置開始動畫前烟很,在動畫過程中颈墅,動畫結束后
.onStart()
開始動畫前的回調函數。
.onStop()
結束動畫后的回調函數雾袱。
.onUpdate()
控制動畫過程中的操作恤筛。
.onComplete()
在動畫全部結束后執(zhí)行。
可以調用chain()
函數使動畫循環(huán)播放或是幾個動畫連續(xù)播放芹橡。
var tween2 = new TWEEN.Tween(position).to({y:200},1000);//就會在1000毫秒內x會從0移動到200
tween.chain(tween2);//tween結束后就執(zhí)行tween2
//tween2.chain(tween)//加上這句就可以循環(huán)播放動畫了
tween.start()//由tween先開始
更多關于tween的資料請參考:https://github.com/sole/tween.js/blob/master/docs/user_guide.md