首页 > 代码库 > 用仿ActionScript的语法来编写html5——第八篇，图片处理+粒子效果

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

2024-08-15 23:13:41   210人阅读

本文为 兄弟连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

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

 

 

[html] view plain copy
 
  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="UTF-8">  
  5. <title>粒子效果</title>  
  6. </head>  
  7. <body>  
  8. <div id="mylegend">loading......</div>  
  9. <script type="text/javascript" src=http://www.mamicode.com/"http://lufylegend.com/js/lufylegend-1.6.1.min.js"></script>   
  10. <script type="text/javascript">  
  11. init(40,"mylegend",300,300,main);  
  12. var imgData = [{name:"img",path:"http://lufylegend.com/images/face.jpg"}];  
  13. var imglist;  
  14. var mainBitmap,mainBitmapHeight;  
  15. var windList = [];  
  16. var backLayer;  
  17. function main(){  
  18.     LLoadManage.load(  
  19.         imgData,  
  20.         function(progress){},  
  21.         loadover  
  22.     );  
  23. }  
  24. function loadover(result){  
  25.     imglist = result;  
  26.     //加入一个LSprite对象  
  27.     backLayer = new LSprite();  
  28.     addChild(backLayer);  
  29.     //加入一个LBitmap对象来显示一张大图片，将图片加载到backLayer对象上  
  30.     mainBitmap = new LBitmap(new LBitmapData(imglist["img"]));  
  31.     backLayer.addChild(mainBitmap);  
  32.     //将LBitmap对象初始的高度保存起来  
  33.     mainBitmapHeight = mainBitmap.getHeight();  
  34.     //给LSprite对象加载一个贞事件，即时间轴  
  35.     backLayer.addEventListener(LEvent.ENTER_FRAME,onframe);  
  36. }  
  37. function onframe(){  
  38.     var bitmapdata;  
  39.     var bitmap;  
  40.     var addY,addX;  
  41.   
  42.     if(mainBitmap){  
  43.         //通过LBitmapData对象的setProperties函数，来修改LBitmapData对象显示图片的范围，每运行一次，显示范围在y轴方向上的起始位置向下移动addY个单位  
  44.         addY = 3;  
  45.         mainBitmap.y += addY;  
  46.         if(mainBitmap.y >= mainBitmapHeight){  
  47.             addY += mainBitmapHeight - mainBitmap.y;  
  48.             mainBitmap.y = mainBitmapHeight;  
  49.             //当LBitmapData对象显示图片的范围变为0之后，将其从backLayer上移除  
  50.             backLayer.removeChild(mainBitmap);  
  51.         }else{  
  52.             mainBitmap.bitmapData.setProperties(0,mainBitmap.y,mainBitmap.getWidth(),(mainBitmapHeight - mainBitmap.y));  
  53.         }  
  54.         //下面是将图片一行一行的分解，每运行一次分解一行  
  55.         var arr = [];  
  56.         for(i=0;i<mainBitmap.getWidth();i += 3){  
  57.             addX = 3;  
  58.             if(i+addX > mainBitmap.getWidth()){  
  59.                 addX = mainBitmap.getWidth() - i;  
  60.             }  
  61.             //通过设定LBitmapData对象的显示范围，来得到分解后的小图片，并且将分解后的小图片压入到arr数组  
  62.             bitmapdata = new LBitmapData(imglist["img"],i,mainBitmap.y-addY,addX,addY);  
  63.             bitmap = new LBitmap(bitmapdata);  
  64.             bitmap.x = i;  
  65.             bitmap.y = mainBitmap.y-addY;  
  66.             backLayer.addChild(bitmap);  
  67.             arr.push(bitmap);  
  68.         }  
  69.         if(mainBitmap.y >= mainBitmapHeight)mainBitmap=null;  
  70.         //将分解后的一行小图片压入windList数组  
  71.         windList.push(arr);  
  72.     }  
  73.     windrun();  
  74. }  
  75. function windrun(){  
  76.     var i,j,flag,ml=1;  
  77.     //循环windList数组中的每一张小图片，随机向左上右等方向进行移动  
  78.     for(i=0;i<windList.length;i++){  
  79.         if(windList[i].length == 0){  
  80.             windList.splice(i,1);  
  81.             i--;  
  82.             continue;  
  83.         }  
  84.         for(j=0;j<windList[i].length;j++){  
  85.             if(windList[i][j].i == null)windList[i][j].i=1;  
  86.             flag = Math.random();  
  87.             if(flag < 0.3){  
  88.                 windList[i][j].x += ml*windList[i][j].i;  
  89.             }else if(flag < 0.6){  
  90.                 windList[i][j].x -= ml*windList[i][j].i;  
  91.             }else{  
  92.                 windList[i][j].y -= ml*windList[i][j].i;  
  93.             }  
  94.             windList[i][j].alpha -= 0.05;  
  95.             windList[i][j].i += 2;  
  96.             if(windList[i][j].alpha <= 0 || windList[i][j].x > LGlobal.width || windList[i][j].y > LGlobal.height){  
  97.                 backLayer.removeChild(windList[i][j]);  
  98.                 windList[i].splice(j,1);  
  99.                 j--;  
  100.             }  
  101.         }  
  102.     }  
  103. }  
  104. </script>   
  105. </body>  
  106. </html>  

测试连接

 

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

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

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

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


联系
我们