游戏中会用着一些简单的动画，公司一般使用的dragonbones制作，导出二进制格式或者MC来使用。
感觉一些简单动画直接使用动画编辑器更加简便些。
引擎版本：5.0.14
wing版本：4.1.0
一 效果图
二 使用动画编辑器
我这里使用的是类似Flash的MovieClip的概念。
这个开场动画是一个自定义组件，由OpenAnim.ts 和OpenAnimSkin.exml组成。
你可以使用代码创建，或者直接拖动到其他exml中使用它(这样非常方便摆位置)。
写了一堆又删了，关于动画编辑器的教程，还是看官方的吧。哈哈...哈哈...
官方动画编辑器教程：http://developer.egret.com/cn/github/egret-docs/Wing/animation/index.html
三 使用OpenAnim
1 自定义组件OpenAnim，包含动画的皮肤OpenAnimSkin.exml
使用的素材
OpenAnimSkin.exml
OpenAnim.ts
[AppleScript] 纯文本查看 复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 | /** * 开场动画 * @author chenkai 2018/2/25 */class OpenAnim extends eui.Component{ private openAnim:egret.tween.TweenGroup; //开场动画 public constructor() { super(); this.skinName = "OpenAnimSkin"; this.percentWidth = 100; this.percentHeight = 100; } public childrenCreated(){ } //播放 public play(){ this.openAnim.addEventListener(egret.Event.COMPLETE, this.onTweenGroupComplete, this); this.openAnim.play(); } //停止 public stop(){ this.openAnim.stop(); } //动画播放完成 private onTweenGroupComplete(): void { this.openAnim.removeEventListener(egret.Event.COMPLETE, this.onTweenGroupComplete, this); this.dispatchEvent(new egret.Event(egret.Event.COMPLETE)); }} |
我们在其他exml中使用这个动画，可以使用代码创建，或者直接拖动到其他exml中
这里拖动一个openAnim动画到主页HomeSceneSkin皮肤上，并在代码中使用
[AppleScript] 纯文本查看 复制代码
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 | /** * 主页 * @author chenkai 2018/2/25 */class HomeScene extends eui.Component{ private openAnim:OpenAnim; //开场动画 public constructor() { super(); this.percentWidth = 100; this.percentHeight = 100; this.skinName = "HomeSceneSkin"; } protected childrenCreated(){ super.childrenCreated(); this.openAnim.addEventListener(egret.Event.COMPLETE, this.onAnimComplete, this); this.openAnim.play(); } private onAnimComplete(){ console.log("动画播放完成"); }} |
三 Demo