lufylegend练习(2)Animation

原创 2014年11月23日 20:20:31

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

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

HTML5超帅动画制作-LTweenLite的妙用

lufylegend.js是一个开源的HTML5游戏引擎,在游戏中往往会有各种的动画,这些动画有些是flash文件,有些是视频文件,本次就来利用lufylegend制作一个帅气的游戏动画。...

lufylegend练习(1)帧速率

最近发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/ 但是没有基础的同学,看起来费劲,所以打算边学边记笔记,说明都在注释中 帧速率 ...

lufylegend教程:如何创建循环移动的背景

lufylegend教程:如何创建循环移动的背景 发布时间:2014-09-26         关键字:lufylegend教程 开发游戏的过程中,常常需要循环移动的背景。 类似下面这两种...
  • cdnight
  • cdnight
  • 2016年02月04日 10:21
  • 1255

iOS 动画Animation - 6 - 2:实战练习之淘宝购物车动画解析

首先说明:这是一系列文章,参考本专题下其他的文章有助于你对本文的理解。首先我所要说的购物车动画并不是说把商品加入购物车时商品图片旋转飞出的动画,如果看了我这一个系列的博客,就会觉得那个简直不要太简单。...

Animation_2(ListView动画)

  • 2015年01月06日 16:13
  • 171KB
  • 下载

Android Animation Frame逐帧动画2

  • 2014年05月14日 11:35
  • 2.05MB
  • 下载

Uni2D 入门 -- Skeletal Animation

Uni2D V2.0 引进了一个新的skinning 特性:由于内置骨骼动画编辑器你现在能增加骨头到你的sprite并立刻让他们动画。为了这样做,你的sprite只需要几步设置,通过posing 模式...

ulead gif animation2

  • 2007年09月02日 00:55
  • 6.91MB
  • 下载

The Fundamentals of Animation(2nd) epub

  • 2017年10月06日 08:25
  • 54.07MB
  • 下载

cocos2dx动画Animation介绍

一、帧动画 你可以通过一系列图片文件,像如下这样,创建一个动画: [cpp]   CCAnimation *animation = CCAnimation::create();   ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:lufylegend练习(2)Animation
举报原因:
原因补充:

(最多只允许输入30个字)