首页 >

HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)【javascript】

Posted on | by liu
web前端|js教程HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)【javascript】
HTML5,游戏引擎,LTweenLite,动画效果
web前端-js教程
短信轰炸机源码怎么写,vscode选中一行快捷键,Ubuntu内置驱动,tomcat是自动开启么,爬虫音乐保存,上海php平均工资,seo整站推广方案哪家做得好lzw
lufylegend.js是一个开源的HTML5游戏引擎，在游戏中往往会有各种的动画，这些动画有些是flash文件，有些是视频文件，本次就来利用lufylegend制作一个帅气的游戏动画，如下图。
wpf 媒体播放器 源码,ubuntu 音频解码,tomcat不写项目名,台湾爬虫游戏,php 任务分配系统,禅城seo排名优化多少钱lzw
测试连接如下：
http://lufylegend.com/demo/effects01/
竞赛报名系统 源码,ubuntu启动ui命令,php 爬虫和python,php 撮合,seo工具排名lzw
A、准备工作

准备工作当然就是引擎的下载了。

lufylegend.js引擎官网
http://lufylegend.com/lufylegend

lufylegend.js引擎在线API文档链接
http://lufylegend.com/lufylegend/api

B、制作过程

要做动画，一般是要用到时间轴，在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

    effects01
2. 接着引擎初期化，还有图片读取

var imgData = [  {name:"background",path:"background.jpg"},  {name:"background_ad",path:"background_ad.jpg"},  {name:"card01",path:"card01.jpg"},  {name:"card02",path:"card02.jpg"},  {name:"card03",path:"card03.jpg"},  {name:"card04",path:"card04.jpg"},  {name:"card05",path:"card05.jpg"},  {name:"effects",path:"effects.jpg"},  {name:"stable_assets",path:"stable_assets.jpg"}];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= 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);}
完成了，以上是所有代码。欢迎大家一起交流

C、源码

完整实例代码点击此处本站下载。

  
HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)【javascript】
  • jQuery学习笔记之jQuery动画效果【jquery】

    • jQuery学习笔记之jQuery动画效果【jquery】 | jQuery学习笔记之jQuery动画效果【jquery】 ...

    HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)【javascript】
  • jQuery动画效果相关方法实例分析【jquery】

    • jQuery动画效果相关方法实例分析【jquery】 | jQuery动画效果相关方法实例分析【jquery】 ...

    HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)【javascript】
  • js动画效果打开层 关闭层【javascript】

    • js动画效果打开层 关闭层【javascript】 | js动画效果打开层 关闭层【javascript】 ...