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