前言

egret中实现动画的方式，有几种，缓动动画、关键帧、序列帧、龙骨动画。
在不同场景下可以选择适合的动画实现方式。这里只介绍缓动动画。

通常情况下，游戏中或多或少都会带有一些缓动动画。例如界面弹出，或者道具飞入飞>出的特效等等。在制作这些缓动动画的时候我们仅仅希望简单的办法实现这种移动或者>变形缩放的效果。Egret中的 Tween 缓动动画类就为我们提供了相关的功能。

添加tween模块

从Egret 2.5 开始，以官方扩展模块的形式支持 Tween 。在现有的 Egret 项目中，修改egretProperties.json中的modules，添加 tween 模块：

1
2
3

{
    "name": "tween"
}

在项目所在目录内执行一次引擎编译：

1	egret build -e

本步骤已经完成，现在项目中既可以使用 Tween 相关的API了。

资源加载

只有当所需的资源加载完成之后才能获取资源，并赋予动画。
使用通用MVC框架，这里简单介绍其资源加载策略。

以下为部分代码

main.ts

class Main extends egret.DisplayObjectContainer {
        //初始化场景及模块
        this.initScene();
        this.initModule();

        App.SceneManager.runScene(SceneConsts.LOADING);

        //加载资源版本号
        if (false) {
            App.ResVersionManager.loadConfig("resource/resource_version.json", this.loadResVersionComplate, this);
        } else {
            this.loadResVersionComplate();
        }       
    }

    private loadResVersionComplate(): void {
        //初始化Resource资源加载库（这里加载自动以的资源配置方案，如龙骨动画资源、框架核心资源），静态资源加载完成事件
        App.ResourceUtils.addConfig("resource/default.res.json", "resource/");
        App.ResourceUtils.addConfig("resource/resource_core.json", "resource/");
        App.ResourceUtils.addConfig("resource/resource_ui.json", "resource/");
        App.ResourceUtils.addConfig("resource/resource_battle.json", "resource/");
        App.ResourceUtils.loadConfig(this.onConfigComplete, this);
    }
	
	/**
     * 配置文件加载完成,开始预加载preload资源组。
     */
    private onConfigComplete(): void {
        //加载皮肤主题配置文件,可以手动修改这个文件。替换默认皮肤。
        var theme = new eui.Theme("resource/default.thm.json", this.stage);
        theme.addEventListener(eui.UIEvent.COMPLETE, this.onThemeLoadComplete, this);
    }
	
	
	    /**
     * 主题文件加载完成
     */
    private onThemeLoadComplete(): void {
        new BlackJack();
    }
}

BlackJack.ts


class BlackJack {
     public constructor() {
        var groupName: string = "preload"
		//此处将页面所需的资源分组加载，加载完成后就能拿到图片以实现动画啦
        var subGroups: Array<string> = ["preload_core", "preload_ui", "welcome"]
        App.ResourceUtils.loadGroups(groupName, subGroups, this.onResourceLoadComplete, this.onResourceLoadProgress, this)
    }
    private onResourceLoadComplete(): void {
        this.initModule()
        App.Init()

        //音乐音效处理
        App.SoundManager.setBgOn(true)
        App.SoundManager.setEffectOn(!App.DeviceUtils.IsHtml5 || !App.DeviceUtils.IsMobile)

        //场景管理 有三类场景
        App.SceneManager.runScene(SceneConsts.UI)
    }

    private onResourceLoadProgress(itemsLoaded: number, itemsTotal: number): void {
        App.ControllerManager.applyFunc(ControllerConst.JackLoading, LoadingConst.SetProgress, itemsLoaded, itemsTotal);
    }

    /**
     * 初始化所有模块
     */
    private initModule(): void {
        App.ControllerManager.register(ControllerConst.JackWelcome, new JackWelcomeConstroller())
    }
}

JackWelcomeConstroller.ts

/*
	初始化view模块，并注册到全局的view管理器中
*/
class JackWelcomeConstroller extends BaseController {
    private jackWelcomeView: JackWelcomeView

    public constructor() {
        super()

        this.jackWelcomeView = new JackWelcomeView(this, LayerManager.UI_Main)
        App.ViewManager.register(ViewConst.JackWelcome, this.jackWelcomeView)
    }
}

JackWelcomeView.ts

class JackWelcomeView extends BaseEuiView {
    public constructor($controller: BaseController, $parent: eui.Group) {
        super($controller, $parent)
        this.skinName = "resource/black_jack/skins/JackWelcomeUiSkin.exml"
    }

    private welcomeInfoBtn: eui.Button

    /**
     * 对面板初始化，用于子类继承
     */
    public initUI(): void {
        super.initUI()
        this.welcomeInfoBtn.addEventListener(egret.TouchEvent.TOUCH_TAP, this.imagesTweenStart, this)
        this.addImageToStage()
    }

	/*
		需要赋予动画的三个图片元素
	*/
    private banner: egret.Bitmap
    private infoGo: egret.Bitmap
    private infoText: egret.Bitmap

	/*
		实例化图片，并添加到当前页面中
	*/
    private addImageToStage(): void {
        let banner = new egret.Bitmap()
		//获取前面加载好的资源文件
        banner.texture = RES.getRes('welcome_banner_png')
        banner.x = -50
        banner.y = 274
        this.addChild(this.banner = banner)

        let infoText = new egret.Bitmap()
        infoText.texture = RES.getRes('welcome_info_text_png')
        infoText.x = 35 + this.width
        infoText.y = 190
        this.addChild(this.infoText = infoText)

        let infoGo = new egret.Bitmap()
        infoGo.texture = RES.getRes('welcome_info_go_png')
        infoGo.x = 269 + this.width
        infoGo.y = 924
        this.addChild(this.infoGo = infoGo)
    }

	/*
		监听触发动画的按钮
	*/
    private imagesTweenStart(): void {
        let bannerDis: number
        let infoTextDis: number
        let infoGoDis: number

        if (this.banner.x == -50) {
            bannerDis = -850
            infoTextDis = 35
            infoGoDis = 269
        } else {
            bannerDis = -50
            infoTextDis = 800
            infoGoDis = 1034
        }

		/*
			关键代码
		*/
        egret.Tween.get(this.banner).to({ x: bannerDis }, 300, egret.Ease.sineIn)
        egret.Tween.get(this.infoText).to({ x: infoTextDis }, 300, egret.Ease.sineIn)
        egret.Tween.get(this.infoGo).to({ x: infoGoDis }, 300, egret.Ease.sineIn)
    }

}

Egret 图片缓动动画实现

前言

添加tween模块

资源加载

实现效果