lufylegend:动画

1.动画1

<script type="text/javascript">
var loader,anime,layer;  

//初始化画布
init(200, "mylegend", 500, 350, main);

//初始化回调函数
function main() {
    //加载图片资源
    loader = new LLoader();
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
    loader.load("chara.png","bitmapData");
}
//图片加载完成后回调函数
function loadBitmapdata(event) {
    //LBitmapData用于进一步构造一个Bitmap对象
    //LBitmapData四个构造参数含义:图像资源,从原图中开始截取的原点坐标(x,y),截取的宽度和高度
    var bitmapdata = new LBitmapData(loader.content, 0, 0, 64, 64);
    ////将原图分割为动画帧,此对象封装了分割方式,将原图分割成4*4
    var list = LGlobal.divideCoordinate(256,256,4,4);
     //加入层LSprite
    layer = new LSprite();
    addChild(layer);
    //得到一个animate对象,参数:层,bitmapData,分割方式
    anime = new LAnimation(layer, bitmapdata, list);
    //循环动画
    layer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
//此函数会被反复调用
//以帧速率调度此事件。
function onframe(){
    anime.onframe();
}
</script>

2.动画2

<script type="text/javascript">
var loader,anime,layer;
init(200,"mylegend",500,350,main);
function main(){
    loader = new LLoader();
    loader.addEventListener(LEvent.COMPLETE,loadBitmapdata);
    loader.load("chara.png","bitmapData");
}
function loadBitmapdata(event){
    var bitmapdata = new LBitmapData(loader.content,0,0,64,64);
    var list = LGlobal.divideCoordinate(256,256,4,4);
     //加入层LSprite
    layer = new LSprite();
    addChild(layer);

    //动画操作一般有这几种:1,设置动画 2,获取动画信息 3,添加动画监听事件 4,播放动画
    anime = new LAnimation(layer, bitmapdata, list);

    layer.addEventListener(LEvent.ENTER_FRAME,onframe);
}
function onframe() {
    //getAction方法,获取动画信息
    var action = anime.getAction();
    switch(action[0]){
        case 0:
            //人物下行
            layer.y += 5;
            if (layer.y >= 200) {
                //setAction方法,设置动画
                anime.setAction(2);
            }
            break;
        case 1:
            //人物左行
            layer.x -= 5;
            if(layer.x <= 0){
                anime.setAction(0);
            }
            break;
        case 2:
            //人物右行
            layer.x += 5;
            if(layer.x >= 200){
                anime.setAction(3);
            }
            break;
        case 3:
            //人物上行
            layer.y -= 5;
            if(layer.y <= 0){
                anime.setAction(1);
            }
            break;
    }
    //onframe方法,播放动画
    anime.onframe();
}
</script>
时间: 2024-11-24 16:02:32

lufylegend:动画的相关文章

lufylegend:图形变形3

面来看看drawtriangles函数的扩展.利用drawtriangles函数来实现一个旋转的3D地球,效果如下 因为lufylegend1.5.0版的drawtriangles函数有个bug,所以我悄悄的更新了lufylegend1.5.1版,大家可以到官网下载,地址如下 http://lufylegend.com/lufylegend 其实绘制3d球体效果的话,首先就是绘制一个平面,然后将这个平面分成一个一个的小三角形,然后再用这些小三角形拼凑成一个圆球就可以了 现在,我先创建一个空白的L

lufylegend游戏引擎

lufylegend游戏引擎介绍:click 这个链接我觉得已经很详细的介绍了这个引擎. 所以以下我只说说一些简单的游戏代码过程. 首先从canvas做游戏叙述起: 这是一个让人很熟悉的简单小游戏,网上到处都是这个小游戏代码,所以就简单说说: HTML代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>简单游戏&

lufy-legend学习笔记之帧速率

最近发现一个HTML开源游戏引擎,感觉还不错http://lufylegend.com/ 但是没有基础的同学,看起来费劲,所以打算边学边记笔记,说明都在注释中 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>帧速率</title> <script src="js/lufylegend-1.9.7.js"><

HTML5 Canvas游戏开发(四)lufylegend开源库件(下)

一.文本 LTextField对象是lufylegend库件中专门用于显示文本信息的一个对象. 1.文本属性 创建的文本框对象不会自动加入可视化对象列表中.只有手动调用addChild()方法才能使它显示. var layer = new LSprite(); //初始化LSprite对象 addChild(layer); //将对象添加进canvas画布中 var field = new LTextField(); //创建文本框对象 field.text = "Hello World!&qu

『HTML5梦幻之旅』 - 舞动色彩,Canvas下实现颜色动画

注:为了方便起见,本次开发用到了开源引擎lufylegend,官方地址如下:http://lufylegend.com/lufylegend 今天来学习下HTML5 Canvas颜色动画.什么是颜色动画呢?以我的理解就是以某种颜色过渡到另一种颜色.和这个效果有点类似:http://w3school.com.cn/tiy/t.asp?f=css3_animation1 上面的demo是用css3实现,而我们今天要用的是Canvas.Canvas并没有相关的API,所以要想实现这种效果,只有靠自己了

在Lufylegend中如何设置bitmap或者sprite的缩放和旋转中心

最近两天有个lufylegend游戏引擎群的群友需要做一个项目,其中要解决的需求是:获取照相机拍摄的图片,根据图片的EXIF信息让图片显示为“正常”情况,并且需要给图片添加一些事件侦听.何为正常呢?就是我们拍照的时候,因为横着或者竖着拿相机或者手机拍摄的图片,最终显示出来的时候要是拍摄时候的样子,比如: “我霉”orz 我就当您是用过lufylegend的道友了.那么我们知道Bitmap这个层的默认旋转中心是其内容中心,也就是:bitmap.getWidth()*0.5,bitmap.getHe

html5游戏开发--&quot;动静&quot;结合(二)-用地图块拼成大地图 &amp; 初探lufylegend

一.前言 本次教程将向大家讲解如何用HTML5将小地图块拼成大地图,以及如何用现有的高级html5游戏开发库件lufylegend.js开发游戏. 首先让我们来了解了解如何用html5实现动画,毕竟"动静结合"是先有动再有静.看了上一章的内容,或许你就有了对html5实现动画有了初步了解: html5游戏开发--"动静"结合(一):  http://blog.csdn.NET/yorhomwang/article/details/8301451 二.html5实现用

lufylegend:图片的加载和显示

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8" /> <script type="text/javascript" src="../lufylegend-1.7.6.min.js"></script> </head> <body> <div id="mylegend"&g

*C#(WPF)--矩阵拖动和矩阵动画(拖动展开,不足动画效果)

最近在研发新的项目,遇到了一个桌面模式下的难点--展开动画.之前动画这方面没做过,也许很多人开始做的时候也会遇到相关问题,因此我把几个重点及实际效果图总结展示出来: 我的开发环境是在VS2017下进行的,这个工具条主要功能是:一个工具条,可进行拖拉.可进行拖拉展开,可在拖动之后不足展开并反向继续展开剩下的部分: 一.[拖动]   拖动的核心代码是通过矩阵进行定位和拖动的,定位是以父容器为模板的.以下是核心代码(及效果图): 1 /// <summary> 2 /// 这里TitleBar代指最