本文實例講述了HTML5游戲引擎LTweenLite實現的超帥動畫效果。分享給大家供大家參考，具體如下：
lufylegend.js是一個開源的HTML5游戲引擎，在游戲中往往會有各種的動畫，這些動畫有些是flash文件，有些是視頻文件，本次就來利用lufylegend制作一個帥氣的游戲動畫，如下圖。
測試連接如下：
http://lufylegend.com/demo/effects01/
一、準備工作
準備工作當然就是引擎的下載了。
lufylegend.js引擎官網
http://lufylegend.com/lufylegend
lufylegend.js引擎在線API文檔鏈接
http://lufylegend.com/lufylegend/api
二、制作過程
要做動畫，一般是要用到時間軸，在lufylegend.js引擎中時間軸事件用法如下
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="js/lufylegend-1.8.0.simple.min.js"></script> <script type="text/javascript" src="js/lufylegend.LoadingSample4-0.1.0.min.js"></script></head><body style="margin:0px 0px 0px 0px;"> <div id="legend"></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. 一個閃爍的標題
/** * 標題 * */function Title(bitmapData){ var self = this; base(self,LSprite,[]); self.bitmap = new MiddleBitmap(bitmapData); self.bitmap.scaleX = self.bitmap.scaleY = 0.5; self.addChild(self.bitmap); self.run();}/** * 通過改變標題的透明狀態，讓標題明暗交替閃爍 * */Title.prototype.run = function(){ var self = this; LTweenLite.to(self.bitmap,1,{alpha:0.4,ease:Quad.easeInOut}). to(self.bitmap,1,{alpha:1,ease:Quad.easeInOut,onComplete:function(obj){ obj.parent.run(); }});}上面代碼，通過不斷的改變圖片的透明度，實現了標題的閃爍顯示。
6. 可以翻轉顯示圖片的寶劍類
/** * 劍，通過參數scale的直，來設定劍的圖片是否翻轉 * */function Swords(bitmapData,scale){ var self = this; base(self,LSprite,[]); self.bitmapSwords = new LBitmap(bitmapData); self.bitmapSwords.x = -self.bitmapSwords.getWidth()*0.5; self.bitmapSwords.y = -self.bitmapSwords.getHeight()*0.5; if(scale == -1){ self.bitmapSwords.scaleY = scale; self.bitmapSwords.y += self.bitmapSwords.getHeight(); } self.addChild(self.bitmapSwords);}7. 將圖片移動到頂點的對象。將子對象LBitmap的中心移動到該對象的原點的話，好處就是無論對象伸縮還是旋轉，對象顯示的位置不會發生變化了。
/** * 將LBitmap對象的中心放到一個對象的原點，并返回這個對象 * */function MiddleBitmap(bitmapData){ var self = this; base(self,LSprite,[]); self.bitmapTitle = new LBitmap(bitmapData); self.bitmapTitle.x = -self.bitmapTitle.getWidth()*0.5; self.bitmapTitle.y = -self.bitmapTitle.getHeight()*0.5; self.addChild(self.bitmapTitle);}8. 一個特效類
/** * 特效類，特效圖片加入后，特效顯示完畢之后自動消失 * */function Effect(index){ var self = this; base(self,LSprite,[]); var bitmapData; switch(index){ case 0: bitmapData = new LBitmapData(dataList["effects"],99,45,116,96); break; case 1: bitmapData = new LBitmapData(dataList["effects"],102,278,110,88); break; case 2: bitmapData = new LBitmapData(dataList["effects"],357,85,122,127); break; case 3: bitmapData = new LBitmapData(dataList["effects"],346,357,108,99); break; case 4: bitmapData = new LBitmapData(dataList["effects"],246,918,57,62); break; } self.item = new MiddleBitmap(bitmapData); self.item.scaleX = self.item.scaleY = 0.1; self.addChild(self.item); LTweenLite.to(self.item,0.1,{scaleX:2,scaleY:2,ease:Quad.easeInOut}) .to(self.item,0.2,{scaleX:3,scaleY:3,alpha:0,ease:Quad.easeInOut,onComplete:function(obj){ var eff = obj.parent; eff.parent.removeChild(eff); }});}上面的特效類，當特效對象添加到畫面上后，會逐漸自動消失。
9. 添加人物到畫面上
/** * 添加人物圖片到界面里 * */function setChara(){ charaLayer = new LSprite(); stageLayer.addChild(charaLayer); var charaBitmap,sy = 220; var charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card01"])); charaBitmap.scale = 0.4; charaBitmap.x = 110; charaBitmap.ty = 50; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap); charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card02"])); charaBitmap.scale = 0.45; charaBitmap.x = 85; charaBitmap.ty = 90; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap); charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card03"])); charaBitmap.scale = 0.55; charaBitmap.x = 70; charaBitmap.ty = 140; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap); charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card04"])); charaBitmap.scale = 0.65; charaBitmap.x = 75; charaBitmap.ty = 215; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap); charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card05"])); charaBitmap.scale = 0.75; charaBitmap.x = 85; charaBitmap.ty = 280; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap); //right charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card05"])); charaBitmap.scale = 0.4; charaBitmap.x = 215; charaBitmap.ty = 50; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap); charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card04"])); charaBitmap.scale = 0.45; charaBitmap.x = 240; charaBitmap.ty = 90; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap); charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card01"])); charaBitmap.scale = 0.55; charaBitmap.x = 260; charaBitmap.ty = 140; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap); charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card03"])); charaBitmap.scale = 0.65; charaBitmap.x = 260; charaBitmap.ty = 215; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap); charaBitmap = new MiddleBitmap(new LBitmapData(dataList["card02"])); charaBitmap.scale = 0.75; charaBitmap.x = 242; charaBitmap.ty = 280; charaBitmap.y = sy; charaBitmap.alpha = 0; charaLayer.addChild(charaBitmap);}向左右兩邊各添加五個人物，并且設定好他么最終要顯示到畫面上的目標位置和目標大小。
用下面的函數，可以添加一個特效
function addEff(index,x,y){ var eff = new Effect(index); eff.x = x; eff.y = y; stageLayer.addChild(eff);}10. 下面先將所有的對象添加到畫面上，一開始暫時不用顯示的對象，將它的visible屬性設置成false；
/** * 將所有對象和圖片都添加到界面上 * */function addItem(){ backLayer = new LSprite(); stageLayer.addChild(backLayer); backLayer.scaleX = backLayer.scaleY = 2; background = new BackGround(dataList["background"],dataList["background_ad"]); background.x = -60; background.y = -50; backLayer.addChild(background); var warship = new Warship(new LBitmapData(dataList["stable_assets"],0,0,409,480) ,new LBitmapData(dataList["stable_assets"],754,0,270,250)); warship.scaleX = warship.scaleY = 0.8; backLayer.addChild(warship); setChara(); warshipDown = new LSprite(); warshipDown.y = LGlobal.height; stageLayer.addChild(warshipDown); var warship02 = new LBitmap(new LBitmapData(dataList["stable_assets"],0,505,720,310)); warship02.scaleX = warship02.scaleY = 0.5; warship02.x = (LGlobal.width - warship02.getWidth())*0.5; warshipDown.addChild(warship02); var small_vs = new MiddleBitmap(new LBitmapData(dataList["stable_assets"],726,502,120,120)); small_vs.scaleX = small_vs.scaleY = 0.6; small_vs.x = LGlobal.width*0.5; small_vs.y = LGlobal.height - 355; warshipDown.addChild(small_vs); playerText = new LTextField(); playerText.color = "red"; playerText.text = "player"; playerText.x = (LGlobal.width*0.5 - playerText.getWidth())*0.5; playerText.y = 30; warshipDown.addChild(playerText); enemyText = new LTextField(); enemyText.color = "red"; enemyText.text = "enemy"; enemyText.x = LGlobal.width*0.5 + (LGlobal.width*0.5 - enemyText.getWidth())*0.5; enemyText.y = 30; warshipDown.addChild(enemyText); windowUp = new LSprite(); windowUp.y = -50; stageLayer.addChild(windowUp); var title_battle = new MiddleBitmap(new LBitmapData(dataList["stable_assets"],897,469,45,239)); title_battle.rotate = -90; title_battle.scaleX = title_battle.scaleY = 0.55; title_battle.x = LGlobal.width*0.5; title_battle.y = 10; windowUp.addChild(title_battle); var chain = new LBitmap(new LBitmapData(dataList["stable_assets"],880,264,71,180)); chain.rotate = -90; chain.scaleX = chain.scaleY = 0.5; windowUp.addChild(chain); var chain01 = new LBitmap(new LBitmapData(dataList["stable_assets"],851,740,100,173)); chain01.rotate = -90; chain01.scaleX = chain01.scaleY = 0.6; chain01.x = 240; windowUp.addChild(chain01); title = new Title(new LBitmapData(dataList["stable_assets"],415,425,405,80)); title.x = LGlobal.width*0.5; title.y = 290; title.alpha = 0; title.visible = false; stageLayer.addChild(title); big_vs = new MiddleBitmap(new LBitmapData(dataList["stable_assets"],420,5,340,330)); big_vs.rotate = -90; big_vs.x = LGlobal.width*0.5; big_vs.y = 170; big_vs.alpha = 0; big_vs.visible = false; stageLayer.addChild(big_vs); swords = new Swords(new LBitmapData(dataList["stable_assets"],405,335,454,89),1); swords.x = LGlobal.width*0.5; swords.y = LGlobal.height*0.5 - 60; swords.rotate = -135; swords.scaleX = swords.scaleY = 0.8; swords.visible = false; stageLayer.addChild(swords); swords02 = new Swords(new LBitmapData(dataList["stable_assets"],405,335,454,89),-1); swords02.x = LGlobal.width*0.5; swords02.y = LGlobal.height*0.5 - 60; swords02.rotate = -45; swords02.scaleX = swords02.scaleY = 0.8; swords02.visible = false; stageLayer.addChild(swords02);}11. 利用緩動功能，實現動畫。
先看第一個動畫
/* * 第一個動畫開始播放 * */function animation01Start(event){ if(event){ stageLayer.die(); stageLayer.removeAllChild(); } /*添加所有對象*/ addItem(); /*所有人物開始緩動*/ var charaList = charaLayer.childList,chara,delayValue,duration; for(var i=0,l=charaList.length;i<l i="" chara="charaList[i];" y="220;" scalex="chara.scaleY" 2="" delayvalue="0.1*i;" if="">= 5){ delayValue = 0.1*(i - 5); } duration = 1 - delayValue; chara.y = 220; LTweenLite.to(chara,duration,{delay:delayValue,alpha:1,scaleX:chara.scale,scaleY:chara.scale,ease:Strong.easeOut}) .to(chara,1,{y:chara.ty,ease:Strong.easeOut}); } /*背景緩動，變大左移上移→變小右移下移*/ LTweenLite.to(backLayer,1,{scaleX:1.3,scaleY:1.3,x:-100,y:-50,ease:Strong.easeOut}) .to(backLayer,1,{scaleX:1,scaleY:1,x:0,y:0,ease:Strong.easeOut}); /*下面窗口緩動，延時→上移→標題可顯示＋VS可顯示*/ LTweenLite.to(warshipDown,0.5,{delay:1.5,y:320,ease:Elastic.easeOut,onComplete:function(){ title.visible = big_vs.visible = true; }}); /*上面窗口緩動，延時→下移*/ LTweenLite.to(windowUp,0.5,{delay:1.5,y:0,ease:Elastic.easeOut}); /*上面窗口緩動，延時→不透明*/ LTweenLite.to(title,0.2,{delay:1.5,alpha:1,ease:Elastic.easeOut}); /*VS標題緩動，延時→不透明縮小→縮小→添加特效并且進入第二個動畫初始化*/ LTweenLite.to(big_vs,0.5,{delay:1.5,alpha:1,scaleX:1,scaleY:1,ease:Elastic.easeOut}) .to(big_vs,1,{scaleX:0.45,scaleY:0.45,ease:Elastic.easeOut,onComplete:function(){ addEff(1,big_vs.x,big_vs.y); addEff(1,big_vs.x,big_vs.y); /*所有緩動后，動畫2開始準備*/ animation02Init(); }});}第二個動畫
/* * 第二個動畫開始播放 * */function animation02Start(event){ stageLayer.removeEventListener(LMouseEvent.MOUSE_UP, animation02Start); /*VS緩動，變大變透明→然后消失*/ LTweenLite.to(big_vs,1,{scaleX:2,scaleY:2,alpha:0,ease:Elastic.easeIn,onComplete:function(){ big_vs.parent.removeChild(big_vs); }}); /*背景緩動，變大→變大→變小*/ LTweenLite.to(backLayer,2,{delay:1,scaleX:1.2,scaleY:1.2,x:-100,y:-50,ease:Sine.easeInOut}) .to(backLayer,1,{scaleX:1.5,scaleY:1.5,ease:Sine.easeInOut}) .to(backLayer,0.5,{scaleX:1,scaleY:1,x:0,y:0,ease:Sine.easeInOut}); /*下面窗口緩動，下移→上移*/ LTweenLite.to(warshipDown,0.5,{delay:0.5,y:LGlobal.height,ease:Strong.easeOut}) .to(warshipDown,0.5,{delay:3,y:320,ease:Strong.easeOut}); /*上面窗口緩動，上移→下移*/ LTweenLite.to(windowUp,0.5,{delay:0.5,y:-50,ease:Strong.easeOut}) .to(windowUp,0.5,{delay:3,y:0,ease:Strong.easeOut}); /*標題緩動，無效果→不顯示＋人物緩動開始→顯示*/ LTweenLite.to(title,0.5,{delay:0.5,ease:Strong.easeOut,onComplete:function(obj){ obj.visible = false; charaBattle(); }}) .to(title,0.5,{delay:3,ease:Strong.easeOut,onComplete:function(obj){ obj.visible = true; }}); /*寶劍變為可顯示，且坐標設定在畫面之外*/ swords.visible = true; swords02.visible = true; swords.x = -200; swords02.x = LGlobal.width + 200; var wait = 4; /*左邊寶劍緩動，向右移動屏幕中間*/ LTweenLite.to(swords,0.5,{delay:wait,x:LGlobal.width*0.5,ease:Elastic.easeOut}); /*右邊寶劍緩動，向左移動屏幕中間*/ LTweenLite.to(swords02,0.5,{delay:wait,x:LGlobal.width*0.5,ease:Elastic.easeOut}); /*stageLayer緩動，無效果延時，結束后添加特效并且進入第一個動畫初始化*/ LTweenLite.to(stageLayer,0.2,{delay:wait,onComplete:function(){ addEff(Math.random()*5 >> 0,LGlobal.width*0.5,LGlobal.height*0.4); addEff(Math.random()*5 >> 0,LGlobal.width*0.5,LGlobal.height*0.4); addEff(Math.random()*5 >> 0,LGlobal.width*0.5,LGlobal.height*0.4); animation01Init(); }});}12. 最后是，兩個動畫結束后要添加點擊事件，點擊屏幕讓兩個動畫可以相互切換
/* * 點擊畫面后，第一個動畫開始播放 * */function animation01Init(){ stageLayer.addEventListener(LMouseEvent.MOUSE_UP, animation01Start);}/* * 點擊畫面后，第二個動畫開始播放 * */function animation02Init(){ stageLayer.addEventListener(LMouseEvent.MOUSE_UP, animation02Start);}完成了，以上是所有代碼。歡迎大家一起交流
三、源碼
完整實例代碼點擊此處本站下載。
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
