tween-egret.tween

 這邊介紹 Egret UI Editor 動畫編輯

1. 先建立藍背景畫面, 與 100 x 100 白色矩形

2. 查看程式碼

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.GameSceneAniSkin" width="640" height="1136" xmlns:e="http://ns.egret.com/eui">
    <e:Rect width="100%" height="100%" fillColor="0x5C9FC8"/>
    <e:Rect id="rect" width="100" height="100" fillColor="0xFFFFFF"/>
</e:Skin>

3. 執行下面步驟

1. 切換到 Animation 面板
2. 新增 Tween Group 命名 tg
3. 點擊白色矩形, 因為要對他進行動畫
4. 點擊＋按鈕新增動畫
5. 0秒處影格右鍵 Add Key Frame
6. 1秒處影格右鍵 Add Key Frame
7. 兩個影格中間處右鍵 Create Tween Animation

4. 對白色矩形做動畫

1. 點選1秒處影格
2. 移動白色矩形至 400, 400 處 (滑鼠或 keyin 皆可)
3. 設置 alpha 為 0, rotation 為 360
4. 預覽動畫

5. 查看程式碼

<?xml version='1.0' encoding='utf-8'?>
<e:Skin class="skins.GameSceneAniSkin" width="640" height="1136" 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="{400}" y="{400}" alpha="{0}" rotation="{360}"/>
					</tween:props>
				</tween:To>
			</tween:TweenItem>
		</tween:TweenGroup>
	</w:Declarations>
    <e:Rect width="100%" height="100%" fillColor="0x5C9FC8"/>
    <e:Rect id="rect" width="100" height="100" fillColor="0xFFFFFF"/>
</e:Skin>

6. 撰寫動畫執行程式碼

class GameSceneAni extends eui.Component {

    private tg: egret.tween.TweenGroup;

    protected createChildren(): void {
        super.createChildren();
        this.skinName = skins.GameSceneAniSkin;
        this.tg.play();
    }

}