【咸鱼教程】Wing动画编辑器创建精美(一般-_-)开场动画

游戏中会用着一些简单的动画，公司一般使用的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