HTML5 게임 엔진 LTweenLite(데모 소스 코드 다운로드 포함)_javascript 기술로 구현된 매우 멋진 애니메이션 효과
- WBOY원래의
- 2016-05-16 15:17:491666검색
이 기사의 예에서는 HTML5 게임 엔진 LTweenLite가 달성한 매우 멋진 애니메이션 효과를 설명합니다. 참고하실 수 있도록 모든 사람과 공유하세요. 자세한 내용은 다음과 같습니다.
lufylegend.js는 오픈 소스 HTML5 게임 엔진입니다. 게임에는 종종 다양한 애니메이션이 있습니다. 이러한 애니메이션 중 일부는 플래시 파일이고 일부는 비디오 파일이므로 멋진 게임 애니메이션을 만들어 보겠습니다. 아래에 표시됩니다.
테스트 연결은 다음과 같습니다.
http://lufylegend.com/demo/effys01/
1. 준비
준비는 당연히 엔진을 다운로드하는 것입니다.
lufylegend.js 엔진 공식 홈페이지
http://lufylegend.com/lufylegend
lufylegend.js 엔진 온라인 API 문서 링크
http://lufylegend.com/lufylegend/api
2. 제작과정
애니메이션을 하려면 일반적으로 타임라인을 사용해야 합니다. 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 엔진의 easing 클래스로, 애니메이션 제작 과정에서 매우 유용하며, 다음 개발에서는 모든 애니메이션이 LTweenLite를 통해 클래스 클래스로 구현됩니다. .
1. 물론 HTML을 먼저 준비해야 합니다
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>effects01</title> <script type="text/javascript" src="js/lufylegend-1.8.0.simple.min.js"></script> <script type="text/javascript" src="js/lufylegend.LoadingSample4-0.1.0.min.js"></script> </head> <body style="margin:0px 0px 0px 0px;"> <div id="legend"></div> <script> <／script> </body> </html>
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의 새로운 기능인 지속적으로 이징을 사용하고, 이지가 끝나면 자체 실행 함수를 호출하여 루프를 구현합니다.
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);
}
왼쪽과 오른쪽에 5개의 문자를 추가하고 최종적으로 화면에 표시할 대상 위치와 대상 크기를 설정합니다.
특수효과를 추가하려면 다음 기능을 사용하세요
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);
}
첫 번째 애니메이션을 먼저 감상하세요
/*
* 第一个动画开始播放
* */
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();
}});
}
/*
* 第二个动画开始播放
* */
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();
}});
}
/*
* 点击画面后，第一个动画开始播放
* */
function animation01Init(){
stageLayer.addEventListener(LMouseEvent.MOUSE_UP, animation01Start);
}
/*
* 点击画面后，第二个动画开始播放
* */
function animation02Init(){
stageLayer.addEventListener(LMouseEvent.MOUSE_UP, animation02Start);
}
3. 소스코드
전체 예제 코드를 보려면 여기를 클릭하세요이 사이트에서 다운로드하세요.
이 기사가 JavaScript 프로그래밍에 종사하는 모든 사람에게 도움이 되기를 바랍니다.성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.