用仿ActionScript的语法来编写html5系列开发到现在，应该可以做出一些东西了，下面先来研究下图片的各种效果
预览各种效果看下图

效果和代码看这里,看不到效果的请下载支持html5的浏览器

http://fsanguo.comoj.com/html5/jstoas07/index.html

2013年3月13日追加

该系列文章写的很早，目前该系列文章中所总结的方法等都已经封装进了lufylegend.js引擎里

lufylegend.js引擎的下载链接

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>粒子效果</title>

</head>

<body>

<div id="mylegend">loading......</div>

<script type="text/javascript" src="http://lufylegend.com/js/lufylegend-1.6.1.min.js"></script>

<script type="text/javascript">

init(40,"mylegend",300,300,main);

var imgData = [{name:"img",path:"http://lufylegend.com/images/face.jpg"}];

var imglist;

var mainBitmap,mainBitmapHeight;

var windList = [];

var backLayer;

function main(){

    LLoadManage.load(

        imgData,

        function(progress){},

        loadover

    );

}

function loadover(result){

    imglist = result;

    //加入一个LSprite对象

    backLayer = new LSprite();

    addChild(backLayer);

    //加入一个LBitmap对象来显示一张大图片，将图片加载到backLayer对象上

    mainBitmap = new LBitmap(new LBitmapData(imglist["img"]));

    backLayer.addChild(mainBitmap);

    //将LBitmap对象初始的高度保存起来

    mainBitmapHeight = mainBitmap.getHeight();

    //给LSprite对象加载一个贞事件，即时间轴

    backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);

}

function onframe(){

    var bitmapdata;

    var bitmap;

    var addY,addX;

    if(mainBitmap){

        //通过LBitmapData对象的setProperties函数，来修改LBitmapData对象显示图片的范围，每运行一次，显示范围在y轴方向上的起始位置向下移动addY个单位

        addY = 3;

        mainBitmap.y += addY;

        if(mainBitmap.y >= mainBitmapHeight){

            addY += mainBitmapHeight - mainBitmap.y;

            mainBitmap.y = mainBitmapHeight;

            //当LBitmapData对象显示图片的范围变为0之后，将其从backLayer上移除

            backLayer.removeChild(mainBitmap);

        }else{

            mainBitmap.bitmapData.setProperties(0,mainBitmap.y,mainBitmap.getWidth(),(mainBitmapHeight - mainBitmap.y));

        }

        //下面是将图片一行一行的分解，每运行一次分解一行

        var arr = [];

        for(i=0;i<mainBitmap.getWidth();i += 3){

            addX = 3;

            if(i+addX > mainBitmap.getWidth()){

                addX = mainBitmap.getWidth() - i;

            }

            //通过设定LBitmapData对象的显示范围，来得到分解后的小图片，并且将分解后的小图片压入到arr数组

            bitmapdata = new LBitmapData(imglist["img"],i,mainBitmap.y-addY,addX,addY);

            bitmap = new LBitmap(bitmapdata);

            bitmap.x = i;

            bitmap.y = mainBitmap.y-addY;

            backLayer.addChild(bitmap);

            arr.push(bitmap);

        }

        if(mainBitmap.y >= mainBitmapHeight)mainBitmap=null;

        //将分解后的一行小图片压入windList数组

        windList.push(arr);

    }

    windrun();

}

function windrun(){

    var i,j,flag,ml=1;

    //循环windList数组中的每一张小图片，随机向左上右等方向进行移动

    for(i=0;i<windList.length;i++){

        if(windList[i].length == 0){

            windList.splice(i,1);

            i--;

            continue;

        }

        for(j=0;j<windList[i].length;j++){

            if(windList[i][j].i == null)windList[i][j].i=1;

            flag = Math.random();

            if(flag < 0.3){

                windList[i][j].x += ml*windList[i][j].i;

            }else if(flag < 0.6){

                windList[i][j].x -= ml*windList[i][j].i;

            }else{

                windList[i][j].y -= ml*windList[i][j].i;

            }

            windList[i][j].alpha -= 0.05;

            windList[i][j].i += 2;

            if(windList[i][j].alpha <= 0 || windList[i][j].x > LGlobal.width || windList[i][j].y > LGlobal.height){

                backLayer.removeChild(windList[i][j]);

                windList[i].splice(j,1);

                j--;

            }

        }

    }

}

</script>

</body>

</html>

测试连接

http://lufylegend.com/demo/astojs/8.html

下面有朋友问我原理，这个粒子效果其实就是将一张大的图片从上而下，一行一行进行分解，然后将分解后的碎图片，沿着随机的方向一边散开，一边降低透明度，当透明度降低为0的时候，将它移除。

上面的代码我加上了简单的注释，应该不难理解了。

因为引擎封装后，对于之前的代码做了一部分调整，删去了一些属性，下面是我用新版引擎开发的同样的粒子效果

用仿ActionScript的语法来编写html5——第八篇，图片处理+粒子效果的更多相关文章

  1. 用仿ActionScript的语法来编写html5——第五篇，Graphics绘图

    用仿ActionScript的语法来编写html5——第五篇,Graphics绘图 canvas本身就是一个Graphics,可以直接进行绘图在actionscript里面,每个Sprite都有一个G ...

  2. 用仿ActionScript的语法来编写html5——第六篇，TextField与输入框

    一,对比1,html5中首先看看在html5的canvas中的文字显示 var canvas = document.getElementById("myCanvas"); var ...

  3. 用仿ActionScript的语法来编写html5——第三篇，鼠标事件与游戏人物移动

    第三篇,鼠标事件与游戏人物移动 一,假设假设,所有可添加鼠标事件的对象,都有一个mouseEvent方法,添加的鼠标事件同过这个mouseEvent来调用.这样的话,添加鼠标事件,其实只需要给canv ...

  4. 用仿ActionScript的语法来编写html5——第七篇，自定义按钮

    第七篇,自定义按钮这次弄个简单点的,自定义按钮.其实,有了前面所定义的LSprite,LBitmap等类,定义按钮就很方便了.下面是添加按钮的代码, function gameInit(event){ ...

  5. 用仿ActionScript的语法来编写html5——第四篇，继承与简单的rpg

    第四篇,继承与简单的rpg 这次用继承自LSprite的类来实现简单的rpg的demo先看一下最后的代码与as的相似度 var backLayer; //地图 var mapimg; //人物 var ...

  6. 用仿ActionScript的语法来编写html5——终篇，LegendForHtml5Programming1.0开源库件

    一,LegendForHtml5Programming1.0库件是什么?它是一个javascript库,它模仿了ActionScript的语法,用于html5的开发,目前实现的功能相对较少,还不能称之 ...

  7. 用仿ActionScript的语法来编写html5——第九篇，仿URLLoader读取文件

    第九篇,仿URLLoader读取文件 先看看最后的代码 function readFile(){ urlloader = new LURLLoader(); urlloader.addEventLis ...

  8. 用仿ActionScript的语法来编写html5——第二篇，利用Sprite来实现动画

    上一篇,我已经模仿as,加入了LBitmap和LBitmapData类,并且用它们实现了静态图片的显示.这次用Sprite来动态显示图片.依然遵循上一篇对显示对象的处理的思路,添加LSprite类,并 ...

  9. 用仿ActionScript的语法来编写html5——第一篇，显示一张图片

    第一篇,显示一张图片 一,代码对比 as代码: public var loader:Loader; public function loadimg():void{ loader = new Loade ...

随机推荐

  1. pod 安装 Masonry 遇到问题

    pod 导入第三方库 Masonry: 在工程masonryTest的文件下新建一个Podfile文件 编辑如下内容: platform :ios, '8.0'xcodeproj 'mansoryTe ...

  2. Android adb 命令使用总结

    adb原理 参考文档 How ADB works        http://www.cnblogs.com/ifantastic/p/5186362.html http://blog.csdn.ne ...

  3. cURL 学习笔记与总结（2）网页爬虫、天气预报

    例1.一个简单的 curl 获取百度 html 的爬虫程序(crawler): spider.php <?php /* 获取百度html的简单网页爬虫 */ $curl = curl_init( ...

  4. 百度BAE环境下WordPress安装教程

    不了解代码的童鞋慎重使用这种方法哦,安装过程中可能会出现一些简单的错误. 前两天有位网友在QQ上联系我,他告诉我自己在百度BAE上安装WordPress程序总是出错.我让他按照网络上的教程逐步安装,但 ...

  5. STM32全球唯一ID读取方法

    产品唯一的身份标识非常适合:● 用来作为序列号(例如USB字符序列号或者其他的终端应用)● 用来作为密码,在编写闪存时,将此唯一标识与软件加解密算法结合使用,提高代码在闪存存储器内的安全性.● 用来激 ...

  6. wordpress 添加自定义菜单到管理面板（wp-admin)

    如果你在做 wordpress 主题或插件的开发,通常需要在后台dashboard管理面板添加菜单方便用户做主题设置或插件设置.这篇文章要讨论的问题就是怎么样加这个菜单,加在哪里? 添加顶级菜单项 a ...

  7. Happy

    1.delighted 2.over the moon                   Alex is over the moon with promotion. 3.really pleased ...

  8. JVM内存配置

    JVM内存主要分为两个部分,分别是PermanentSapce和HeapSpace. PermantSpace主要负责存放加载的Class类级对象如class本身,method,field等反射对象, ...

  9. java笔记--关于线程同步（5种同步方式）【转】

    为何要使用同步?     java允许多线程并发控制,当多个线程同时操作一个可共享的资源变量时(如数据的增删改查),      将会导致数据不准确,相互之间产生冲突,因此加入同步锁以避免在该线程没有完 ...

  10. SQL查询中关于索引使用的笔记

    建表KeyLevelStat (无主键),2个索引: CREATE TABLE KeyLevelStat( [Date] [int] NOT NULL, [Num] [varchar](8), [R0 ...