关闭

lufylegend练习(2)Animation

标签: html5canvas动画animation
1770人阅读 评论(0) 收藏 举报
分类:

引擎下载地址: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这个游戏 

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:193822次
    • 积分:2493
    • 等级:
    • 排名:第16669名
    • 原创:71篇
    • 转载:29篇
    • 译文:4篇
    • 评论:61条
    最新评论