Egret Wing 動畫編輯器

先參考：EUI 如何開始

Step1. 建立 MyAnime 組件(包含 MyAnime.ts, MyAnimeSkin.exml, default.thm.json 關聯設定)
MyAnime.ts

namespace edwin {

    export class MyAnime extends eui.Component {

        protected createChildren(): void {
            super.createChildren();
        }

    }

}

MyAnimeSkin.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MyAnimeSkin" xmlns:e="http://ns.egret.com/eui">
    <e:Rect fillColor="0xCCCCCC" width="400" height="400" />
    <e:Rect fillColor="0xFFFFFF" width="50" height="50" />
</e:Skin>

Step2. 動畫組件加入至 MainUI.exml

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui" xmlns:edwin="edwin.*">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <!--讓動畫物件水平垂直至中於畫面-->
    <edwin:MyAnime horizontalCenter="0" verticalCenter="0" />
</e:Skin>

Step3. Compile 看畫面如下, 可以開始用動畫編輯器了

Step4. 請在 MyAnimeSkin.exml 切換 Source 面板到 Animation 面板實作下列步驟:

1. 新增動畫群組命名tg
2. 點選白色矩形, 我們要對這個矩形做動畫
3. 新增動畫
4. 0秒處影格右鍵 Add Key Frame
5. 1秒處影格右鍵 Add Key Frame
6. 兩個影格中間處右鍵 Create Tween Animation

Step5. 設置白色矩形的動畫:

1. 點選1秒處影格
2. 拖拉白色矩形至畫面右下角
3. 設置 Alpha = 0, Rotation = 360

Step6. MyAnimeSkin.exml 切回 Source 面板會發現多了一些程式碼:

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MyAnimeSkin" xmlns:e="http://ns.egret.com/eui" xmlns:w="http://ns.egret.com/wing" xmlns:tween="egret.tween.*">
    <w:Declarations>
        <tween:TweenGroup id="tg">
            <tween:TweenItem target="{rect}">
                <tween:Set/>
                <tween:To duration="1000">
                    <tween:props>
                        <e:Object x="{350}" y="{350}" alpha="{0}" rotation="{360}"/>
                    </tween:props>
                </tween:To>
            </tween:TweenItem>
        </tween:TweenGroup>
    </w:Declarations>
    <e:Rect fillColor="0xCCCCCC" width="400" height="400" />
    <e:Rect id="rect" fillColor="0xFFFFFF" width="50" height="50" />
</e:Skin>

Step7. 修改程式碼:
MyAnime.ts 新增 play 方法

namespace edwin {

    export class MyAnime extends eui.Component {

        private tg: egret.tween.TweenGroup;

        protected createChildren(): void {
            super.createChildren();
        }

        public play(): void {
            this.tg.play();
        }

    }

}

MainUISkin.exml 新增 id 給 MyAnime

<?xml version="1.0" encoding="utf-8"?>
<e:Skin class="edwin.MainUISkin" xmlns:e="http://ns.egret.com/eui" xmlns:edwin="edwin.*">
    <e:Rect fillColor="0x000000" width="100%" height="100%" />
    <!-- 讓動畫物件水平垂直至中於畫面 -->
    <edwin:MyAnime id="anime" horizontalCenter="0" verticalCenter="0" />
</e:Skin>

MainUI.ts 新增this.anime.play();即可

namespace edwin {

    export class MainUI extends eui.Component {

        private anime: edwin.MyAnime;

        protected createChildren(): void {
            super.createChildren();
            this.percentWidth = this.percentHeight = 100;
            this.anime.play();
        }

    }

}

Step8. Compile 看動畫 ~~