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

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

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

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

lufylegend.js是一個(gè)開(kāi)源的HTML5游戲引擎，在游戲中往往會(huì)有各種的動(dòng)畫(huà)，這些動(dòng)畫(huà)有些是flash文件，有些是視頻文件，本次就來(lái)利用lufylegend制作一個(gè)帥氣的游戲動(dòng)畫(huà)，如下圖。

測(cè)試連接如下：
http://lufylegend.com/demo/effects01/

一、準(zhǔn)備工作

準(zhǔn)備工作當(dāng)然就是引擎的下載了。

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

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

二、制作過(guò)程

要做動(dòng)畫(huà)，一般是要用到時(shí)間軸，在lufylegend.js引擎中時(shí)間軸事件用法如下

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

layer.addEventListener(LEvent.ENTER_FRAME, onframe);

比如我們讓一個(gè)對(duì)象A不斷的向右移動(dòng)，我們可一這么做

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

時(shí)間軸是游戲和動(dòng)畫(huà)的制作中最常用的方法，但是本次制作動(dòng)畫(huà)，采用另一種做法，就是LTweenLite。

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

1. 當(dāng)然，要先準(zhǔn)備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);
}

上面代碼，當(dāng)使用手機(jī)瀏覽的時(shí)候，會(huì)設(shè)定界面為全屏。

3. 建立一個(gè)自動(dòng)閃爍的背景

/**
 * 背景
 * */
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();
}
/**
 * 讓背景類的兩個(gè)圖片中的上層圖片，不斷的交替顯示和隱藏狀態(tài)，以達(dá)到明暗交替閃爍的效果
 * */
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ù)緩動(dòng)，并且當(dāng)緩動(dòng)結(jié)束之后，再調(diào)用本身的run函數(shù)，從而實(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();
}
/**
 * 讓?xiě)?zhàn)艦上下浮動(dòng)
 * */
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();
  }});
}
/**
 * 讓?xiě)?zhàn)艦開(kāi)火發(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();
  }});
}

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

5. 一個(gè)閃爍的標(biāo)題

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

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

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

/**
 * 劍，通過(guò)參數(shù)scale的直，來(lái)設(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. 將圖片移動(dòng)到頂點(diǎn)的對(duì)象。將子對(duì)象LBitmap的中心移動(dòng)到該對(duì)象的原點(diǎn)的話，好處就是無(wú)論對(duì)象伸縮還是旋轉(zhuǎn)，對(duì)象顯示的位置不會(huì)發(fā)生變化了。

/**
 * 將LBitmap對(duì)象的中心放到一個(gè)對(duì)象的原點(diǎn)，并返回這個(gè)對(duì)象
 * */
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. 一個(gè)特效類

/**
 * 特效類，特效圖片加入后，特效顯示完畢之后自動(dòng)消失
 * */
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);
  }});
}

上面的特效類，當(dāng)特效對(duì)象添加到畫(huà)面上后，會(huì)逐漸自動(dòng)消失。

9. 添加人物到畫(huà)面上

/**
 * 添加人物圖片到界面里
 * */
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);
}

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

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

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

10. 下面先將所有的對(duì)象添加到畫(huà)面上，一開(kāi)始暫時(shí)不用顯示的對(duì)象，將它的visible屬性設(shè)置成false；

/**
 * 將所有對(duì)象和圖片都添加到界面上
 * */
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. 利用緩動(dòng)功能，實(shí)現(xiàn)動(dòng)畫(huà)。

先看第一個(gè)動(dòng)畫(huà)

/*
 * 第一個(gè)動(dòng)畫(huà)開(kāi)始播放
 * */
function animation01Start(event){
  if(event){
    stageLayer.die();
    stageLayer.removeAllChild();
  }
  /*添加所有對(duì)象*/
  addItem();
  /*所有人物開(kāi)始緩動(dòng)*/
  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});
  }
  /*背景緩動(dòng)，變大左移上移→變小右移下移*/
  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});
  /*下面窗口緩動(dòng)，延時(shí)→上移→標(biāo)題可顯示＋VS可顯示*/
  LTweenLite.to(warshipDown,0.5,{delay:1.5,y:320,ease:Elastic.easeOut,onComplete:function(){
    title.visible = big_vs.visible = true;
  }});
  /*上面窗口緩動(dòng)，延時(shí)→下移*/
  LTweenLite.to(windowUp,0.5,{delay:1.5,y:0,ease:Elastic.easeOut});
  /*上面窗口緩動(dòng)，延時(shí)→不透明*/
  LTweenLite.to(title,0.2,{delay:1.5,alpha:1,ease:Elastic.easeOut});
  /*VS標(biāo)題緩動(dòng)，延時(shí)→不透明縮小→縮小→添加特效并且進(jìn)入第二個(gè)動(dòng)畫(huà)初始化*/
  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);
    /*所有緩動(dòng)后，動(dòng)畫(huà)2開(kāi)始準(zhǔn)備*/
    animation02Init();
  }});
}

第二個(gè)動(dòng)畫(huà)

/*
 * 第二個(gè)動(dòng)畫(huà)開(kāi)始播放
 * */
function animation02Start(event){
  stageLayer.removeEventListener(LMouseEvent.MOUSE_UP, animation02Start);
  /*VS緩動(dòng)，變大變透明→然后消失*/
  LTweenLite.to(big_vs,1,{scaleX:2,scaleY:2,alpha:0,ease:Elastic.easeIn,onComplete:function(){
    big_vs.parent.removeChild(big_vs);
  }});
  /*背景緩動(dòng)，變大→變大→變小*/
  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});
  /*下面窗口緩動(dòng)，下移→上移*/
  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});
  /*上面窗口緩動(dòng)，上移→下移*/
  LTweenLite.to(windowUp,0.5,{delay:0.5,y:-50,ease:Strong.easeOut})
  .to(windowUp,0.5,{delay:3,y:0,ease:Strong.easeOut});
  /*標(biāo)題緩動(dòng)，無(wú)效果→不顯示＋人物緩動(dòng)開(kāi)始→顯示*/
  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)榭娠@示，且坐標(biāo)設(shè)定在畫(huà)面之外*/
  swords.visible = true;
  swords02.visible = true;
  swords.x = -200;
  swords02.x = LGlobal.width + 200;
  var wait = 4;
  /*左邊寶劍緩動(dòng)，向右移動(dòng)屏幕中間*/
  LTweenLite.to(swords,0.5,{delay:wait,x:LGlobal.width*0.5,ease:Elastic.easeOut});
  /*右邊寶劍緩動(dòng)，向左移動(dòng)屏幕中間*/
  LTweenLite.to(swords02,0.5,{delay:wait,x:LGlobal.width*0.5,ease:Elastic.easeOut});
  /*stageLayer緩動(dòng)，無(wú)效果延時(shí)，結(jié)束后添加特效并且進(jìn)入第一個(gè)動(dòng)畫(huà)初始化*/
  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. 最后是，兩個(gè)動(dòng)畫(huà)結(jié)束后要添加點(diǎn)擊事件，點(diǎn)擊屏幕讓兩個(gè)動(dòng)畫(huà)可以相互切換

/*
 * 點(diǎn)擊畫(huà)面后，第一個(gè)動(dòng)畫(huà)開(kāi)始播放
 * */
function animation01Init(){
  stageLayer.addEventListener(LMouseEvent.MOUSE_UP, animation01Start);
}
/*
 * 點(diǎn)擊畫(huà)面后，第二個(gè)動(dòng)畫(huà)開(kāi)始播放
 * */
function animation02Init(){
  stageLayer.addEventListener(LMouseEvent.MOUSE_UP, animation02Start);
}

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

三、源碼

完整實(shí)例代碼點(diǎn)擊此處本站下載。

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

您可能感興趣的文章: