HTML5游戲引擎LTweenLite實現(xiàn)的超帥動畫效果(附demo源碼下載)

更新時間：2016年01月26日 14:28:47 作者：lufy

這篇文章主要介紹了HTML5游戲引擎LTweenLite實現(xiàn)的超帥動畫效果,詳細分析了LTweenLite的下載,動畫效果的實現(xiàn)步驟,并附帶完整的demo實例源碼供讀者下載,需要的朋友可以參考下

本文實例講述了HTML5游戲引擎LTweenLite實現(xiàn)的超帥動畫效果。分享給大家供大家參考，具體如下：

lufylegend.js是一個開源的HTML5游戲引擎，在游戲中往往會有各種的動畫，這些動畫有些是flash文件，有些是視頻文件，本次就來利用lufylegend制作一個帥氣的游戲動畫，如下圖。

測試連接如下：
http://lufylegend.com/demo/effects01/

一、準備工作

準備工作當然就是引擎的下載了。

lufylegend.js引擎官網(wǎng)
http://lufylegend.com/lufylegend

lufylegend.js引擎在線API文檔鏈接
http://lufylegend.com/lufylegend/api

二、制作過程

要做動畫，一般是要用到時間軸，在lufylegend.js引擎中時間軸事件用法如下

復(fù)制代碼代碼如下:

layer.addEventListener(LEvent.ENTER_FRAME, onframe);

比如我們讓一個對象A不斷的向右移動，我們可一這么做

layer.addEventListener(LEvent.ENTER_FRAME, onframe);
function onframe(event){
  A.x += 1;
}

時間軸是游戲和動畫的制作中最常用的方法，但是本次制作動畫，采用另一種做法，就是LTweenLite。

LTweenLite是lufylegend.js引擎中的緩動類，在動畫制作過程中非常的有用，甚至比一般的時間軸事件更為方便，在接下來的開發(fā)，所有的動畫都是通過LTweenLite緩動類類實現(xiàn)的。

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);
}

上面代碼，當使用手機瀏覽的時候，會設(shè)定界面為全屏。

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();
}
/**
 * 讓背景類的兩個圖片中的上層圖片，不斷的交替顯示和隱藏狀態(tài)，以達到明暗交替閃爍的效果
 * */
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版本的新功能，連續(xù)緩動，并且當緩動結(jié)束之后，再調(diào)用本身的run函數(shù)，從而實現(xiàn)了循環(huán)。

4. 一艘不斷發(fā)射炮彈的戰(zhàn)艦

/**
 * 戰(zhàn)艦
 * */
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();
}
/**
 * 讓戰(zhàn)艦上下浮動
 * */
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();
  }});
}
/**
 * 讓戰(zhàn)艦開火發(fā)炮
 * */
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();
  }});
}

上面代碼，利用了同樣的方法實現(xiàn)了循環(huán)。

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();
}
/**
 * 通過改變標題的透明狀態(tài)，讓標題明暗交替閃爍
 * */
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();
  }});
}

上面代碼，通過不斷的改變圖片的透明度，實現(xiàn)了標題的閃爍顯示。

6. 可以翻轉(zhuǎn)顯示圖片的寶劍類

/**
 * 劍，通過參數(shù)scale的直，來設(shè)定劍的圖片是否翻轉(zhuǎn)
 * */
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的中心移動到該對象的原點的話，好處就是無論對象伸縮還是旋轉(zhuǎn)，對象顯示的位置不會發(fā)生變化了。

/**
 * 將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);
}

向左右兩邊各添加五個人物，并且設(shè)定好他么最終要顯示到畫面上的目標位置和目標大小。

用下面的函數(shù)，可以添加一個特效

function addEff(index,x,y){
  var eff = new Effect(index);
  eff.x = x;
  eff.y = y;
  stageLayer.addChild(eff);
}

10. 下面先將所有的對象添加到畫面上，一開始暫時不用顯示的對象，將它的visible屬性設(shè)置成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. 利用緩動功能，實現(xiàn)動畫。

先看第一個動畫

/*
 * 第一個動畫開始播放
 * */
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;
  }});
  /*寶劍變?yōu)榭娠@示，且坐標設(shè)定在畫面之外*/
  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緩動，無效果延時，結(jié)束后添加特效并且進入第一個動畫初始化*/
  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. 最后是，兩個動畫結(jié)束后要添加點擊事件，點擊屏幕讓兩個動畫可以相互切換

/*
 * 點擊畫面后，第一個動畫開始播放
 * */
function animation01Init(){
  stageLayer.addEventListener(LMouseEvent.MOUSE_UP, animation01Start);
}
/*
 * 點擊畫面后，第二個動畫開始播放
 * */
function animation02Init(){
  stageLayer.addEventListener(LMouseEvent.MOUSE_UP, animation02Start);
}

完成了，以上是所有代碼。歡迎大家一起交流

三、源碼

完整實例代碼點擊此處本站下載。

希望本文所述對大家JavaScript程序設(shè)計有所幫助。

您可能感興趣的文章: