HTML5游戏制作之路_04_来做个动画吧

/*

使用的egret版本：2.5

编辑器采用webstrom

*/

通过上一篇03成功可以加载资源，这一篇我们在上一篇的基础上，通过位图来搞一个动画。

如果想参看注释请回到上一篇。

直接上代码，新内容的注释在里面：

/** * Created by 13641 on 2015/11/19. *//** * Created by 13641 on 2015/11/19. */class BitmapAnimation extends egret.DisplayObjectContainer{    private logo:egret.Bitmap;    public constructor() {        super();        this.addEventListener(egret.Event.ADDED_TO_STAGE, this.MainClass, this);    }    public MainClass():void{        //调用        this.loadResources();    }    /**     * 资源加载方法，只是加载，并不会显示     * 就像把豆子放进盒子里管理，我们想看到要从盒子里吧豆子拿出来     */    private loadResources():void{        RES.addEventListener(RES.ResourceEvent.GROUP_COMPLETE,this.onRemoveFromStage,this);        RES.loadConfig("resource/default.res.json","resource/");        RES.loadGroup("bitmap");    }    /**     * 定义回调函数，资源加载完成后加载图片     * @param event :回调函数事件     */    private onRemoveFromStage(event:RES.ResourceEvent):void{        this.logo = new egret.Bitmap();        this.logo.texture = RES.getRes("egretIcon");        this.addChild(this.logo);        //调用动画函数        this.bitmapAnimaiton();    }    private bitmapAnimaiton():void{        //Tween这个类有大量的动画，继承自事件分发        var mytween = egret.Tween.get(this.logo);        //位图在500毫秒内，移动到(280,0)的位置        mytween.to({x:280,y:0},500).to({x:280,y:300},500).to({x:0,y:300},500).to({x:0,y:0},500);        //当上面动画全部结束，我们会再次执行这个动画，当然我们也可以调用别的动画函数        mytween.call(this.bitmapAnimaiton,this);    }}

tween让我想起了unity中的各种tween插件，效果远比egret动画api强大，呵呵。

改变index.html指定类

编译

结果成功。因为是动图，不发了。
对于2d游戏，主要是对于图像的操作，希望看客们能花几分钟看下tween这个类的api大致的功能。

下一节说下位图的属性和操作。