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

/** * 将所有对象和图片都添加到界面上 * */ 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<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(); }}); }

第二个动画

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

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