本文实例讲述了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);
比如我们让一个对象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.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= 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程序设计有所帮助。