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

/* * 第二个动画开始播放 * */ 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); }

完成了,以上是所有代码。欢迎大家一起交流

三、源码

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

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

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