用仿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的时候，将它移除。
上面的代码我加上了简单的注释，应该不难理解了。
因为引擎封装后，对于之前的代码做了一部分调整，删去了一些属性，下面是我用新版引擎开发的同样的粒子效果