lufylegend练习（2）Animation
引擎下载地址：http://lufylegend.com/lufylegend
学习如何做动画，其实动画就是图片不停切换，这是个基本概念，每幅图是一帧的话，一帧帧地走，看起来就是动画
先准备原图：
先用简单的案例让将正面的小妞儿（第一行）走起来
具体看代码和注释：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Animation</title>
<script src="js/lufylegend-1.9.7.js"></script>
<script>
//初始化画布
LInit(1000 / 20, "legend", 800, 450, main);
//资源定义，可以是js和图像，js可以不适用name属性，但type属性="js"是需要的
var sourceList=[
{name:"player",path:"img/player.png"}
];
//控制动画速度的变了
var speed = 2;
var _speed = 0;
//初始化回调函数
function main(){
//加载资源的动画LoadingSample1~7
loadingLayer = new LoadingSample7();
addChild(loadingLayer);
//LLoadManage.load方法用于加载资源，参数：资源列表，加载过程回调函数用于显示加载动画，加载完成后的回调函数
LLoadManage.load(sourceList,function(process){
loadingLayer.setProgress(process);
},gameInit);
}
//result可以认为是一个map，资源列表中的资源可以按键获取
function gameInit(result){
removeChild(loadingLayer);
loadingLayer=null;
//底层
backLayer = new LSprite();
addChild(backLayer);
//小妞所在层
playerLayer=new LSprite();
backLayer.addChild(playerLayer);
//全局变量，我喜欢用dataList
dataList = result;
//出现一个小妞儿
initPlayer();
//初始化动画属性
initAnimate();
//进入图之后，按帧速率调用onframe函数
backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function initPlayer(){
//方便按键获取值
var playerImg = dataList["player"];
//LBitmapData用于进一步构造一个Bitmap对象
//LBitmapData四个构造参数含义：图像资源，从原图中开始截取的原点坐标（x，y），截取的宽度和高度
//此例中截取左上角的小妞儿
playermapData = new LBitmapData(playerImg,0,0,
playerImg.width/4,
playerImg.height/4);
palyerBitmap = new LBitmap(playermapData);
//设定位图出现的坐标
palyerBitmap.x = 0;
palyerBitmap.y = 0;
//添加位图
playerLayer.addChild(palyerBitmap);
}
function initAnimate(){
//将原图分割为动画帧，此对象封装了分割方式，将原图分割成4*4
var coordinateList = LGlobal.divideCoordinate(
playermapData.image.width,
playermapData.image.height,4,4);
//得到一个animate对象，参数：层，bitmapData，分割方式
animate =new LAnimation(playerLayer,playermapData,coordinateList);
//设定播放动画的行号，因为animate封装了一个二维数组，指定行号，就会顺序播放该行的四个帧（连续出现）
animate.setAction(0);
}
//此函数会被反复调用
//播放头进入新帧时调度。如果播放头不移动，或者只有一帧，则会继续以帧速率调度此事件。
function onframe(){
//控制走帧的速度
//_speed自增不到speed，不动，继续自增
if(_speed++<speed){
return ;
}
//等于speed的时候，重置，animate走一帧
_speed = 0;
animate.onframe();//animate从第一帧（第一行1/4图）到第二帧（第一行2/4图）
}
</script>
</head>
<body>
<div id="legend"></div>
</body>
</html>
图片来自lufylegend api中box这个游戏