egret筆記之gui內設置動畫效果

EgretWing->設計->窗口->動畫

能夠打開動畫編輯面版。

首先須要針對當前UI界面設置各類狀態。咱們簡單的設置

【close】：表明當前UI界面處於不可見狀態。

【open】：表明當前UI界面處於可見狀態。

在動畫面版，選擇須要增長動畫的組件，添加動畫效果：

動畫效果設置完畢後，建立對於的ts文件。

  public getCurrentSkinState():string
    {
        if(this.parent) {
            // 可見
            return "open";
        }else{
           //  不可見
            return "close";}
    }

重寫getCurrentSkinState方法，修改返回的狀態值。若是不重寫，你會發現動畫根本不會有任何效果。

由於源碼是這樣的：

/**
* 返回組件當前的皮膚狀態名稱,子類覆蓋此方法定義各類狀態名
* @method egret.gui.SkinnableComponent#getCurrentSkinState
* @returns {string}
*/
public getCurrentSkinState():string {
return this.enabled?"normal":"disabled"
}

因此這個地方須要特殊注意！！！！！

若是狀態特別多，能夠考慮本身新建變量，自行來修改控制。

仔細想一想，狀態的區分實際更像是界面切換的標識。

好比：在一個UI皮膚裏面，咱們管理3個場景，（勝利UI，失敗UI，暫停UI）。這時咱們經過state（win,pause,fail）3個狀態來對應。

固然你也能夠分3個UI皮膚來分別實現3個UI。這樣的話，就很差作出特別好的動畫效果了。

[

可能有人會問，在close狀態下不是全部組件都是不可見的或者不存在的麼？爲何以前要在全部狀態下編輯面板，而不是在open狀態下編輯？ 由於在close狀態下，整個面板是沒有被添加到舞臺的不在顯示列表，因此當咱們看到這個面板時，這個面板必定是open狀態。因此在全部狀態下編輯也何嘗不可。可能有人又會問，是否是弄反了，close狀態才應該是這樣的，open狀態下才應該顯示全部的組件？ 上面說到了close狀態是看不見的，怎麼設置都行。關鍵是open狀態，當狀態從close變爲open時，剛開始那些元素確實是在屏幕外或者看不到的，是隨着動畫的進行纔開始出現的。因此這裏是模擬的動畫開始時候open狀態下的預覽。

]

參考文章：

http://bbs.egret-labs.org/forum.php?mod=viewthread&tid=6503