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