HTML5游戏引擎LTweenLite实现的超帅动画效果(附dem(2)

/** * 标题 * */ 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;

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/wgwzpg.html