Egret有两个可以制作动画的工具，DragonBones后面有空了在说吧，先看一下EgretWing的动画编辑器的使用，自己摸索半天，蒙的一笔，还是看教程的好。
可以去看官方教程：动画编辑器
官方的示例直接使用，可能会报出bug，哈哈，问题在于加载exml文件的时候，还未加载完成就使用exml中的组件，因此，你延时执行初始化就可以了。也就是createChildren后面的内容延时执行。
下面是我自己项目中用到的示例，总觉得官方的怪怪的。
先看效果： 
一、新建TipsViewSkin.exml和TipsView.ts文件。
二、在TipsViewSkin.exml文件中摆放好UI，然后添加动画，如何添加请看官方，用起来虽然简单，说起来比较麻烦。
最后生成的动画是一个egret.tween.TweenGroup,在ts文件中调用其实也是tween缓动动画，也就是说效果可以自己使用tween手写。先看一下exml中tween内容，内容多，但足够简单：
<w:Declarations> <tween:TweenGroup id="close2open"> <tween:TweenItem target="{background}"> <tween:Set> <tween:props> <e:Object alpha="{0}"/> </tween:props> </tween:Set> <tween:To duration="500"> <tween:props> <e:Object alpha="{1}"/> </tween:props> </tween:To> </tween:TweenItem> <tween:TweenItem target="{tips_panel}"> <tween:Set> <tween:props> <e:Object x="{125}" y="{887}" height="{200}" alpha="{0}"/> </tween:props> </tween:Set> <tween:To duration="200"> <tween:props> <e:Object height="{200}" alpha="{1}"/> </tween:props> </tween:To> <tween:To duration="300"> <tween:props> <e:Object height="{440}"/> </tween:props> </tween:To> </tween:TweenItem> <tween:TweenItem target="{tips_title}"> <tween:Set> <tween:props> <e:Object alpha="{0}"/> </tween:props> </tween:Set> <tween:To duration="350"> <tween:props> <e:Object alpha="{0}" y="{60}"/> </tween:props> </tween:To> <tween:To duration="250"> <tween:props> <e:Object alpha="{1}" y="{20}"/> </tween:props> </tween:To> </tween:TweenItem> <tween:TweenItem target="{tips_msg}"> <tween:Set> <tween:props> <e:Object alpha="{0}"/> </tween:props> </tween:Set> <tween:To duration="350"> <tween:props> <e:Object alpha="{0}" y="{115}"/> </tween:props> </tween:To> <tween:To duration="250"> <tween:props> <e:Object alpha="{1}" y="{55}"/> </tween:props> </tween:To> </tween:TweenItem> <tween:TweenItem target="{close_bg}"> <tween:Wait duration="450"/> <tween:Set> <tween:props> <e:Object y="{-80}"/> </tween:props> </tween:Set> <tween:To duration="150"> <tween:props> <e:Object y="{-40}"/> </tween:props> </tween:To> </tween:TweenItem> <tween:TweenItem target="{close_label}"> <tween:Wait duration="450"/> <tween:Set> <tween:props> <e:Object y="{-80}"/> </tween:props> </tween:Set> <tween:To duration="150"> <tween:props> <e:Object y="{-40}"/> </tween:props> </tween:To> </tween:TweenItem> <tween:TweenItem target="{group}"> <tween:Set> <tween:props> <e:Object alpha="{0}"/> </tween:props> </tween:Set> <tween:To duration="450"> <tween:props> <e:Object alpha="{0}"/> </tween:props> </tween:To> <tween:To duration="150"> <tween:props> <e:Object alpha="{1}"/> </tween:props> </tween:To> </tween:TweenItem> </tween:TweenGroup> <tween:TweenGroup id="open2close"> <tween:TweenItem target="{background}"> <tween:Wait duration="100"/> <tween:Set> <tween:props> <e:Object alpha="{0.6}"/> </tween:props> </tween:Set> <tween:To duration="500"> <tween:props> <e:Object alpha="{0}"/> </tween:props> </tween:To> </tween:TweenItem> <tween:TweenItem target="{tips_panel}"> <tween:Wait duration="100"/> <tween:Set> <tween:props> <e:Object height="{440}"/> </tween:props> </tween:Set> <tween:To duration="300"> <tween:props> <e:Object height="{200}"/> </tween:props> </tween:To> <tween:To duration="200"> <tween:props> <e:Object height="{200}" alpha="{0}"/> </tween:props> </tween:To> </tween:TweenItem> <tween:TweenItem target="{tips_title}"> <tween:Set/> <tween:To duration="250"> <tween:props> <e:Object alpha="{0}" y="{60}"/> </tween:props> </tween:To> <tween:To duration="350"/> </tween:TweenItem> <tween:TweenItem target="{tips_msg}"> <tween:Set/> <tween:To duration="250"> <tween:props> <e:Object alpha="{0}" y="{115}"/> </tween:props> </tween:To> <tween:To duration="350"/> </tween:TweenItem> <tween:TweenItem target="{close_bg}"> <tween:Set/> <tween:To duration="150"> <tween:props> <e:Object y="{-80}"/> </tween:props> </tween:To> <tween:To duration="450"/> </tween:TweenItem> <tween:TweenItem target="{close_label}"> <tween:Set/> <tween:To duration="150"> <tween:props> <e:Object y="{-80}"/> </tween:props> </tween:To> <tween:To duration="450"/> </tween:TweenItem> <tween:TweenItem target="{group}"> <tween:Set/> <tween:To duration="150"> <tween:props> <e:Object alpha="{0}"/> </tween:props> </tween:To> <tween:To duration="450"/> </tween:TweenItem> </tween:TweenGroup> </w:Declarations>三、在ts文件中调用，添加到stage上面，自己根据自己结构添加，自己拷贝代码运行肯定是不行的，不过思路没问题。
class TipsView extends eui.Component { public background: eui.Rect; public tips_panel: eui.Group; public top_image_mask: eui.Rect; public top_image: eui.Image; public tips_title: eui.Label; public tips_msg: eui.Label; public close_label: eui.Label; // animation public close2open: egret.tween.TweenGroup; public open2close: egret.tween.TweenGroup; private _hadInit: boolean = false; constructor() { super() this.width = App.StageUtils.getWidth(); this.height = App.StageUtils.getHeight(); this.skinName = "resource/skins/common/help-view/TipsViewSkin.exml"; this.visible = false; } private initUI() { if(this._hadInit) return; this._hadInit = true; LayerManager.UI_Tips.addChild(this); this.top_image.mask = this.top_image_mask; this.close_label.addEventListener(egret.TouchEvent.TOUCH_TAP, this.onCloseHandler, this); this.open2close.addEventListener('complete', this.afterClose, this); } /** * 打开tips view */ public open(title: string, msg: string, animated: boolean) { console.log("open open open"); this.initUI(); this.visible = true; this.tips_title.text = title; this.tips_msg.text = msg; if(animated) { this.close2open.play(0); // 这里很重要，一定要从第0帧开始，erget不会帮你重置 } } /** * 变比tips view */ public close(animated: boolean) { if(animated) { this.open2close.play(0); } else { this.afterClose(); } } /** * 关闭窗口后行为 */ private afterClose() { this.visible = false; } private onCloseHandler() { this.close(true); } private addToParent() { LayerManager.UI_Tips.addChild(this); } }说明：this.close2open.play(0); // 这里很重要，一定要从第0帧开始，erget不会帮你重置，这是个坑，egret说得也是不明不白的，其他引擎会帮你重置到第一帧。
想看demo的话，推荐个网址看看：别人的教程