白鹭引擎之EgretWing动画编辑器使用
发表于2018-11-13
白鹭引擎有两个可以制作动画的工具，这篇主要说的是其中之一EgretWing的动画编辑器的使用，考虑到有些开发者可能还没用过，这里就将相应的官方教程分享给大家。
可以去看官方教程：http://developer.egret.com/cn/github/egret-docs/Wing/animation/index.html
官方的示例直接使用，可能会报出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说得也是不明不白的，其他引擎会帮你重置到第一帧。
注意：egret.tween.Group中如果你添加某一项属性，但是没有动画帧的话，动画在播放的时候是不能监听到完成回调的
也就是说，如果open2close某一项属性没有关键帧，下一行代码中不会回调 this.afterClose()
this.open2close.addEventListener('complete', this.afterClose, this);
想看demo的话，可以看看这个：https://bbs.egret.com/thread-46313-1-1.html
来自：https://blog.csdn.net/honey199396/article/details/80625617