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这个游戏 

版权声明:本文为博主原创文章,转载请说明原文链接。

Lufylegend库学习笔记1 绘图操作及鼠标事件

这几天对于网页前端有点兴趣,学习了一下Canvas的相关知识。 看到Lufylegend库之后,感觉很棒,有一种在写AS的感觉。今天入门第一站,写了一个画板。 是一个非常简易的画板,但是可以看到一些重...
  • pdcxs007
  • pdcxs007
  • 2014年12月30日 22:38
  • 2061

【lufylegend】年会九宫格抽奖程序

前言年关又到了,肯定会有很多抽奖,那么,现在来做一个抽奖程序,山寨下面这个—【网上随便找的】: 好了,下面继续。...
  • cdnight
  • cdnight
  • 2016年01月16日 11:22
  • 1241

HTML5游戏引擎lufylegend深入浅出 - 引擎介绍&原理

最近有的朋友说他们很喜欢原生的javascript的代码,不喜欢看用引擎封装后的,所以希望我写一些原生html5代码。于是我原本就准备在这篇中讲讲用原生html5写游戏,但是写过来写过去发现还得用到l...
  • yorhomwang
  • yorhomwang
  • 2013年12月14日 22:28
  • 38138

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

lufylegend.js是一个开源的HTML5游戏引擎,在游戏中往往会有各种的动画,这些动画有些是flash文件,有些是视频文件,本次就来利用lufylegend制作一个帅气的游戏动画。...
  • lufy_Legend
  • lufy_Legend
  • 2013年10月14日 10:18
  • 21857

lufylegend练习(2)Animation

学习如何做动画,其实动画就是图片不停切换,这是个基本概念,每幅图是一帧的话,一帧帧地走,看起来就是动画 先准备原图:...
  • zhengwei223
  • zhengwei223
  • 2014年11月23日 20:20
  • 1891

HTML5开源游戏引擎lufylegend1.5.0发布

说明lufylegend1.5.0版终于发布了,本来打算再完善一下才发布的,但是最近实在太忙了,1.5.0版拖了又拖,所以决定先发布,等继续完善后再发布1.5.1版,API也相对完善了一下,并加入到了...
  • lufy_Legend
  • lufy_Legend
  • 2012年10月10日 12:25
  • 18249

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

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

使用lufylegend引擎实现图片变形

/** * Created by syl on 2016/7/27 0027. */ var BitmapDataBezierMeshAlgorithm = (function() { f...
  • Vincent_yoyo
  • Vincent_yoyo
  • 2016年11月16日 10:30
  • 433

HTML5游戏开发开源库件lufylegend1.4.1发布

lufylegend.js库件的下载及API文档请点击下面链接http://lufylegend.com/lufylegend一,1.4.1版更新内容1,修正了一些低级bug2,增加了hitTest方...
  • lufy_Legend
  • lufy_Legend
  • 2012年07月16日 15:35
  • 12932

HTML5开源游戏引擎lufylegend1.7.1发布

HTML5开源引擎lufylegend1.7.1版发布,下载包内含开发示例近30个,已分享至github。lufylegend.js引擎官网http://lufylegend.com/lufylege...
  • lufy_Legend
  • lufy_Legend
  • 2013年04月10日 07:08
  • 8415
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:lufylegend练习(2)Animation
举报原因:
原因补充:

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