Egret社区
本帖最后由 gamedaybyday 于 2018-2-28 18:11 编辑

游戏中会用着一些简单的动画,公司一般使用的dragonbones制作,导出二进制格式或者MC来使用。
感觉一些简单动画直接使用动画编辑器更加简便些。



引擎版本:5.0.14
wing版本:4.1.0

一 效果图

jdfw.gif


二  使用动画编辑器
我这里使用的是类似Flash的MovieClip的概念。

这个开场动画是一个自定义组件,由OpenAnim.ts 和OpenAnimSkin.exml组成。

你可以使用代码创建,或者直接拖动到其他exml中使用它(这样非常方便摆位置)。



写了一堆又删了,关于动画编辑器的教程,还是看官方的吧。哈哈...哈哈...

官方动画编辑器教程:http://developer.egret.com/cn/github/egret-docs/Wing/animation/index.html



三 使用OpenAnim
1  自定义组件OpenAnim,包含动画的皮肤OpenAnimSkin.exml

使用的素材
1.jpg


OpenAnimSkin.exml
3.jpg

OpenAnim.ts
[AppleScript] 纯文本查看 复制代码
/**
 * 开场动画
 * @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皮肤上,并在代码中使用
4.jpg

[AppleScript] 纯文本查看 复制代码
/**
 * 主页
 * @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
游客,如果您要查看本帖隐藏内容请回复




分享到 :
7 人收藏

72 个回复

倒序浏览
gamedaybyday  初窥堂奥 | 2018-2-25 19:22:06
最近越来越懒了,维护公司的项目心累,好想休息休息啊....
落幕夜未央  圆转纯熟 | 2018-2-26 09:26:32
gamedaybyday 发表于 2018-2-25 19:22
最近越来越懒了,维护公司的项目心累,好想休息休息啊....

新年伊始。可能需要老板给你打点鸡血(加工资),或者画个流水过亿,分红到手软的大饼
ziwn_vip  炉火纯青 | 2018-2-26 09:31:50
老铁稳啊
gamedaybyday  初窥堂奥 | 2018-2-26 12:37:54
落幕夜未央 发表于 2018-2-26 09:26
新年伊始。可能需要老板给你打点鸡血(加工资),或者画个流水过亿,分红到手软的大饼 ...

没工资加,没奖金,啥也没。。。
jax  圆转纯熟 | 2018-2-26 13:46:42
不错哦,漂亮呀
a7233038  登堂入室 | 2018-2-26 14:53:25
这个程序弄需要点功底啊,
ChiggaCKY  圆转纯熟 | 2018-2-26 15:06:38
不错赞一个,希望白鹭官方可以针对这个功能出更多 TweenGroup的 api
暗夜逢灯  登堂入室 | 2018-3-5 00:09:27
感谢楼主
暗夜逢灯  登堂入室 | 2018-3-5 00:09:33
感谢楼主
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|京网文[2014]0791-191号|京ICP证150115号|Egret社区 ( 京ICP备14025619号

Powered by Discuz! X3.2 © 2001-2019 Comsenz Inc.

返回顶部