LayaAir 緩動動畫
目錄
緩動動畫·概述
1、遊戲開發中緩動動畫比較常見，它是提升遊戲 UI 體驗的重要因素之一，例如對話方塊彈出、關閉，按鈕的動效出現與消失，道具飛入揹包等
2、可以直接使用 LayaAir引 擎提供的 Tween 緩動類與 Ease 類來快捷實現。
3、Tween 緩動類用以實現目標物件屬性的緩動，例如目標物件的 x 或 y 軸的緩動距離等目標值設定，以及緩動開始、停止、清理等設定
4、Ease 類定義了大量的緩動函式，以便實現 Tween 動畫的具體緩動效果
5、LayaAir 引擎的 Tween 類與 Ease 類結合使用，能基本滿足遊戲開發的緩動效果需求
from()與to()方法
1、緩動類 Tween 提供了較多的方法，常用的是 from() 與 to() 方法，這兩個方法的引數設定完全一樣，但效果有所不同，from是從緩動目標點向初始位置產生運動（從緩動目標位置來），to 是從初始位置向緩動目標的位置產生運動（到緩動目標位置去）
/** 從props屬性，緩動到當前狀態——從緩動目標位置來
* @param target 目標物件(即將更改屬性值的物件)。
* @param props 變化的屬性列表，比如 {x:100,y:20,ease:Ease.backOut,complete:Handler.create(this,onComplete),update:new Handler(this,onComplete)}。
* @param duration 花費的時間，單位毫秒，時間越長，緩動效果越慢
* @param ease 緩動型別，預設為勻速運動。
* @param complete 結束回撥函式。
* @param delay 延遲執行時間。
* @param coverBefore 是否覆蓋之前的緩動,default = false
* @param autoRecover 是否自動回收，預設為true，緩動結束之後自動回收到物件池。
* @return 返回Tween物件。
*/
staticfrom(target: any, props: any, duration: number, ease?: Function, complete?: Handler, delay?: number, coverBefore?: boolean, autoRecover?: boolean): Tween;
上面這是靜態的 from 方法， Tween 還過載了一個非靜態的 from 方法，非靜態的 from 少了最後的 autoRecover 引數。
/** 從當前狀態緩動到props屬性——到緩動目標位置去
* @param target 目標物件(即將更改屬性值的物件)。
* @param props 變化的屬性列表，比如
* @param duration 花費的時間，單位毫秒，時間越長，緩動效果越慢
* @param ease 緩動型別，預設為勻速運動。
* @param complete 結束回撥函式。
* @param delay 延遲執行時間。
* @param coverBefore 可選，是否覆蓋之前的緩動,default = false
* @param autoRecover 可選，是否自動回收，預設為 true，緩動結束之後自動回收到物件池。
* @return 返回Tween物件。
*/
static
上面這是靜態的 to方法， Tween 還過載了一個非靜態的 to方法，非靜態的 to 少了最後的 autoRecover 引數。
1、props 屬性
props 是目標物件需要改變，從而產生緩動效果的屬性。物件的公共屬性都可以進行設定，比如最常用的x、y位置屬性，及alpha透明屬性，以及旋轉、軸心、大小等其他屬性
2、ease
ease 為緩動型別，它可以使用Ease類下定義的各種函式來改變動畫的變化過程，LayaAir引擎提供了非常多的緩動方法供開發者們選擇使用
3、complete
complete 為緩動完成後回撥方法。比如按鈕出現的緩動，在緩動過程中不能讓使用者點選，這時就可以用到緩動完成回撥，在回撥函式中再加入按鈕監聽。
緩動動畫·示例
//初始化舞臺
Laya.init(768,1024,Laya.WebGL);
//背景顏色
Laya.stage.bgColor = "#1b2436";
createTween();
//建立緩動文字
function createTween(){
//待顯示的字串，顯示的時候其實是依次顯示字串中的每個字元
var showString = "LayaBox中國";
//offsetX：每一個字元文字顯示的x位置，space：相鄰字元顯示的間距
//即第一個字串的x為100，第二個字串x為 100+30，第三個x是 100+30+30，依此類推
var offsetX = 100;
var space = 40;
//字串中的每個字元文字物件
var wordText;
//遍歷字串，對每個字元建立 Text 物件進行緩動動畫顯示
for(var i = 0,len = showString.length; i<len; i++){
//從"LayaBox"字串中逐個提出單個字元建立文字
wordText = createWordText(showString.charAt(i));
//設定顯示的 Text 的 x 座標
wordText.x = offsetX + i * space;
//文字的y座標
wordText.y = 30;
//物件wordText屬性y從緩動目標的100向初始的y屬性30運動
//每次執行緩動效果需要3000毫秒，緩型別採用elasticOut函式方式，延遲間隔 i*1000 毫秒執行
//為了更好的看清動畫效果與引數的關係，特意將時間設定大一些
//from：使用者看到的效果是 "字串剛開始顯示在 y為 30的位置，然後逐個往下掉到y=100位置，接著又返回到y=30的位置,動畫結束"
//to：使用者看到的效果是 "字串剛開始顯示在 y為 30的位置，然後逐個往下掉到y=100位置,然後動畫結束，不會再返回原位置"
Laya.Tween.from(wordText,{y:100},3000,Laya.Ease.elasticInOut,null,i*1000);
}
}
//建立單個字元文字，並載入到舞臺
function createWordText(char){
var tx = new Laya.Text();
tx.text = char;
tx.color = "#ffffff";
tx.font = "Impact";
tx.fontSize = 50;
Laya.stage.addChild(tx);
return tx;
}
將上面程式碼中的 from 改為 to 之後，效果如下:
props 屬性
1、無論 Tween.from 還是 Tween.to，第二個引數 Props（屬性）可以影響緩動效果的運動軌跡
2、props 是目標物件需要改變從而產生緩動效果的屬性，物件的公共屬性都可以進行設定，比如最常用的x、y位置屬性，及alpha透明屬性，以及旋轉、軸心、大小等其他屬性
3、繼續延續之前的示例，將程式碼修改如下，同時設定多個屬性，這些公共屬性都可以從 Sprite 中看到。
//設定緩動物件從y=100位置向當前位置移動、水平傾斜角度為 20度、透明度為 0.5
//動畫時間 3秒、緩動型別為 elasticInOut、運動結束不進行回撥、延遲間隔時間為 i*100
Laya.Tween.from(wordText,{y:100,skewX:20,alpha:0.5},3000,Laya.Ease.elasticInOut,null,i*100);
Ease 緩動函式
1、Ease 類定義了大量的緩動函式，以便實現 Tween 動畫的具體緩動效果，即 Tween 緩動動畫的具體動畫型別由 Ease 進行指定。
2、laya.utils.Ease API 官方地址：https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Ease
backIn
public static function backIn 開始時往後運動，然後反向朝目標移動。
//初始化舞臺
Laya.init(768,1024,Laya.WebGL);
//背景顏色
Laya.stage.bgColor = "#1b2436";
createTween();
//建立緩動文字
function createTween(){
//待顯示的字串，顯示的時候其實是依次顯示字串中的每個字元
var showString = "LayaBox中國";
//offsetX：每一個字元文字顯示的x位置，space：相鄰字元顯示的間距
//即第一個字串的x為100，第二個字串x為 100+40，第三個x是 100+40+40，依此類推
var offsetX = 100;
var space = 40;
//字串中的每個字元文字物件
var wordText;
//遍歷字串，對每個字元建立 Text 物件進行緩動動畫顯示
for(var i = 0,len = showString.length; i<len; i++){
//從"LayaBox"字串中逐個提出單個字元建立文字
wordText = createWordText(showString.charAt(i));
//設定顯示的 Text 的 x 座標
wordText.x = offsetX + i * space;
//文字的y座標
wordText.y = 20;
Laya.Tween.from(wordText,{y:60,skewX:20,alpha:0.5},3000,Laya.Ease.backIn,null,i*800);
}
}
//建立單個字元文字，並載入到舞臺
function createWordText(char){
var tx = new Laya.Text();
tx.text = char;
tx.color = "#ffffff";
tx.font = "Impact";
tx.fontSize = 40;
Laya.stage.addChild(tx);
return tx;
}
backInOut
public static function backInOut ：開始運動時是向後跟蹤，再倒轉方向並朝目標移動，稍微過沖目標，然後再次倒轉方向，回來朝目標移動。
//其餘程式碼不變，修改如下
Laya.Tween.from(wordText,{y:60,skewX:20,alpha:0.5},3000,Laya.Ease.backInOut,null,i*800);
public static function backOut：開始運動時是朝目標移動，稍微過沖，再倒轉方向回來朝著目標。
//其餘程式碼不變，修改如下
Laya.Tween.from(wordText,{y:60,skewX:20,alpha:0.5},3000,Laya.Ease.backOut,null,i*800);
public static function bounceIn：方法以零速率開始運動，然後在執行時加快運動速度。 它的運動是類似一個球落向地板又彈起後，幾次逐漸減小的回彈運動。
更多 API 函式請參考官網：https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Ease
動畫結束回撥函式
第五個引數 complete 用於執行完緩動效果後的回撥，使用 Laya.Handler.create 即可，下面以一個例子進行演示。
//初始化舞臺
Laya.init(768,1024,Laya.WebGL);
//背景顏色
Laya.stage.bgColor = "#1b2436";
createTween();
//建立緩動文字
function createTween(){
//待顯示的字串，顯示的時候其實是依次顯示字串中的每個字元
var showString = "LayaBox中國";
//offsetX：每一個字元文字顯示的x位置，space：相鄰字元顯示的間距
//即第一個字串的x為100，第二個字串x為 100+40，第三個x是 100+40+40，依此類推
var offsetX = 100;
var space = 40;
//字串中的每個字元文字物件
var wordText;
//遍歷字串，對每個字元建立 Text 物件進行緩動動畫顯示
for(var i = 0,len = showString.length; i<len; i++){
//從"LayaBox"字串中逐個提出單個字元建立文字
wordText = createWordText(showString.charAt(i));
//設定顯示的 Text 的 x 座標
wordText.x = offsetX + i * space;
//文字的y座標
wordText.y = 20;
//新增動畫結束回撥函式
//create(caller: any, method: Function, args?: Array<any>, once?: boolean)
//caller 執行域(this)、method 回撥方法、args 攜帶的引數(回撥函式傳入的引數，必須是陣列形式傳入,按順序對應著回撥函式中的引數)
Laya.Tween.from(wordText,{y:60,skewX:20,alpha:0.5},1000,Laya.Ease.strongOut,Laya.Handler.create(this,tweenOver,[wordText,i]),i*300);
}
}
//建立單個字元文字，並載入到舞臺
function createWordText(char){
var tx = new Laya.Text();
tx.text = char;
tx.color = "#ffffff";
tx.font = "Impact";
tx.fontSize = 40;
Laya.stage.addChild(tx);
return tx;
}
//緩動動畫結束時回撥函式，引數對應著 Laya.Handler.create 中第三個引數陣列中的元素，特意傳入 index 以作區別說明
function tweenOver(txt,index){
console.log("動畫結束："+new Date(),index);
txt.color = "#ff0";
txt.fontSize = 50;
}