egret.Tween跳躍緩動效果實現
阿新 • • 發佈:2019-02-16
今日在工作中遇到一個需求:
- 要求目標元件能從一定高度落地並實現彈跳效果
- 落地後目標元件變矮變胖
- 彈起時目標元件變瘦變高
####Tween使用
在實現此需求之前,先學習一下白鷺引擎的Tween。官方文件如是說:
var tw = egret.Tween.get( shp, { loop:true} ); //迴圈
//在 Tween 執行過程中,也許我們邏輯需要實時做一些變化。跟蹤這個過程同樣可以通過在 Tween.get 的第二個引數中,加入變化事件處理函式的定義來實現。
var obj = { x:0 };
var funcChange = function():void{
console.log( this.x );
}
egret.Tween.get( obj, { onChange:funcChange, onChangeObj:obj } )
.to( {x:600}, 1000 , egret.Ease.backInOut );
對於緩動的控制,可以設定若干其他方法。主要有以下兩個:
- call 在某個緩動過程結束時,可以用 call 產生一個回撥,直接將回調函式作為引數傳給call就可以了。
- wait 用於多個緩動連續設定中設定中間的等待時間,也是以毫秒為單位。
####最終實現如下
如果想使用緩動動畫,你需要使用 Tween 這個類。 Tween 中封裝了最常用的緩動動畫功能,包括動畫時間設定,緩動動畫控制, 緩動效果控制等等。
var tw = egret.Tween.get( shp ); //捕獲shp,shp為目標元件 tw.to( {scaleX:0.8, scaleY:1.1, y:50}, 1 ) //y方向緩動至50,橫向變大0.8倍,縱向變大1.1倍,只用一毫秒 .to( {scaleX:1.1, scaleY:0.8, y:0}, 400) .to( {scaleX:0.8, scaleY:1.1, y:50}, 400) .to( {scaleX:1, scaleY:1, y:0}, 400);