lufylegend.js是一个开源的HTML5游戏引擎，在游戏中往往会有各种的动画，这些动画有些是flash文件，有些是视频文件，本次就来利用lufylegend制作一个帅气的游戏动画，如下图。
一、准备工作
准备工作当然就是引擎的下载了。
二、制作过程
要做动画，一般是要用到时间轴，在lufylegend.js引擎中时间轴事件用法如下
复制代码 代码如下:
layer.addEventListener(LEvent.ENTER_FRAME, onframe);
比如我们让一个对象A不断的向右移动，我们可一这么做
layer.addEventListener(LEvent.ENTER_FRAME, onframe); function onframe(event){ A.x += 1; }
时间轴是游戏和动画的制作中最常用的方法，但是本次制作动画，采用另一种做法，就是LTweenLite。
LTweenLite是lufylegend.js引擎中的缓动类，在动画制作过程中非常的有用，甚至比一般的时间轴事件更为方便，在接下来的开发，所有的动画都是通过LTweenLite缓动类类实现的。
1. 当然，要先准备HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>effects01</title> <script type="text/javascript" src="https://www.jb51.net/js/lufylegend-1.8.0.simple.min.js"></script> <script type="text/javascript" src="https://www.jb51.net/js/lufylegend.LoadingSample4-0.1.0.min.js"></script> </head> <body> <div></div> <script> <／script> </body> </html>
2. 接着引擎初期化，还有图片读取
var imgData = [ {name:"background",path:"background.jpg"}, {name:"background_ad",path:"background_ad.jpg"}, {name:"card01",path:"card01.png"}, {name:"card02",path:"card02.png"}, {name:"card03",path:"card03.png"}, {name:"card04",path:"card04.png"}, {name:"card05",path:"card05.png"}, {name:"effects",path:"effects.png"}, {name:"stable_assets",path:"stable_assets.png"} ]; var dataList; var loadingLayer,charaLayer,stageLayer; var warshipDown,playerText,enemyText,windowUp,title,big_vs,background,swords,swords02; if(LGlobal.canTouch){ LGlobal.stageScale = LStageScaleMode.EXACT_FIT; LSystem.screen(LStage.FULL_SCREEN); } init(20,"legend",320,410,main); function main(){ loadingLayer = new LoadingSample4(); addChild(loadingLayer); /**读取图片*/ LLoadManage.load(imgData, function(progress){ loadingLayer.setProgress(progress); },gameInit); }
上面代码，当使用手机浏览的时候，会设定界面为全屏。
3. 建立一个自动闪烁的背景
/** * 背景 * */ function BackGround(bg01,bg02){ var self = this; base(self,LSprite,[]); self.bitmapBG01 = new LBitmap(new LBitmapData(bg01)); self.addChild(self.bitmapBG01); self.bitmapBG02 = new LBitmap(new LBitmapData(bg02)); self.addChild(self.bitmapBG02); self.run(); } /** * 让背景类的两个图片中的上层图片，不断的交替显示和隐藏状态，以达到明暗交替闪烁的效果 * */ BackGround.prototype.run = function(){ var self = this; var tween = LTweenLite.to(self.bitmapBG02,0.5,{alpha:0,ease:Bounce.easeIn}). to(self.bitmapBG02,0.5,{alpha:1,ease:Bounce.easeIn,onComplete:function(){ self.run(); }}); }
上面代码，用到了lufylegend.js引擎1.8.0版本的新功能，连续缓动，并且当缓动结束之后，再调用本身的run函数，从而实现了循环。
4. 一艘不断发射炮弹的战舰
/** * 战舰 * */ function Warship(shipData,shotData){ var self = this; base(self,LSprite,[]); self.bitmapShip = new LBitmap(shipData); self.addChild(self.bitmapShip); self.bitmapShot = new LBitmap(shotData); self.bitmapShot.x = -10; self.bitmapShot.y = self.bitmapShip.y + 123; self.addChild(self.bitmapShot); self.bitmapShot.rotate = -75; self.bitmapShot.alpha = 0; self.bitmapShot02 = new LBitmap(shotData); self.bitmapShot02.scaleX = self.bitmapShot02.scaleY = 0.7; self.bitmapShot02.x = 65; self.bitmapShot02.y = self.bitmapShip.y + 220; self.addChild(self.bitmapShot02); self.bitmapShot02.rotate = -80; self.bitmapShot02.alpha = 0; self.run(); self.shot(); } /** * 让战舰上下浮动 * */ Warship.prototype.run = function(){ var self = this; LTweenLite.to(self.bitmapShip,1,{y:5,ease:Quad.easeInOut}). to(self.bitmapShip,1,{y:0,ease:Quad.easeInOut,onComplete:function(){ self.run(); }}); } /** * 让战舰开火发炮 * */ Warship.prototype.shot = function(){ var self = this; LTweenLite.to(self.bitmapShot,0.1,{delay:1.5,alpha:1,ease:Quad.easeInOut,onUpdate:function(obj){ obj.y = obj.parent.bitmapShip.y + 123; }}) .to(self.bitmapShot,0.1,{alpha:0,ease:Quad.easeInOut}) .to(self.bitmapShot02,0.1,{delay:0.5,alpha:1,ease:Quad.easeInOut,onUpdate:function(obj){ obj.y = obj.parent.bitmapShip.y + 220; }}) .to(self.bitmapShot02,0.1,{alpha:0,ease:Quad.easeInOut,onComplete:function(){ self.shot(); }}); }
上面代码，利用了同样的方法实现了循环。
5. 一个闪烁的标题