标签：
本文为 兄弟连IT教育 机构官方 HTML5培训 教程，主要介绍：用仿ActionScript的语法来编写html5——第八篇，图片处理+粒子效果
第八篇，图片处理+粒子效果
用仿ActionScript的语法来编写html5系列开发到现在，应该可以做出一些东西了，下面先来研究下图片的各种效果
预览各种效果看下图
效果和代码看这里,看不到效果的请下载支持html5的浏览器
http://fsanguo.comoj.com/html5/jstoas07/index.html
2013年3月13日追加
该系列文章写的很早，目前该系列文章中所总结的方法等都已经封装进了lufylegend.js引擎里
lufylegend.js引擎的下载链接
http://lufylegend.com/lufylegend
因为引擎封装后，对于之前的代码做了一部分调整，删去了一些属性，下面是我用新版引擎开发的同样的粒子效果
- <!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——第八篇，图片处理+粒子效果
标签：
原文地址：http://www.cnblogs.com/itxdl/p/5938019.html
