Egret -- EgretWing动画编辑器使用

最新推荐文章于 2023-11-27 08:34:06 发布

honey199396

最新推荐文章于 2023-11-27 08:34:06 发布

阅读量1w

点赞数 1

分类专栏： Egret 文章标签： egret 动画编辑器 egretwing tween

本文链接：https://blog.youkuaiyun.com/honey199396/article/details/80625617

版权

Egret 专栏收录该内容

15 篇文章

订阅专栏

Egret有两个可以制作动画的工具，DragonBones后面有空了在说吧，先看一下EgretWing的动画编辑器的使用，自己摸索半天，蒙的一笔，还是看教程的好。
可以去看官方教程：动画编辑器

官方的示例直接使用，可能会报出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的话，推荐个网址看看：别人的教程