图片爆炸效果

最新推荐文章于 2023-11-06 17:26:11 发布

shangmw

最新推荐文章于 2023-11-06 17:26:11 发布

阅读量1.4k

点赞数

本文链接：https://blog.csdn.net/shangmw/article/details/5622474

版权

Flash 同时被 2 个专栏收录

22 篇文章 0 订阅

订阅专栏

Bitmap

2 篇文章 0 订阅

订阅专栏

这个需求是昨天碰到的，怎么说呢，怪怪的，主要是想不出可以模拟爆炸效果的公式。
先来看Demo：

OK，接下去看下具体实现过程：

 
   01. 
   import gs.TweenLite;  
  
   02. 
   import gs.easing.Bounce;  
  
   03. 
   var img:TmpImage=new TmpImage();  
  
   04. 
   var bpd_source:BitmapData=new BitmapData(img.width,img.height,true,0);  
  
   05. 
   bpd_source.draw(img);  
  
   06. 
      
   07. 
   var blockSize:uint=3;  
  
   08. 
   var numWidth:uint=Math.ceil(img.width/blockSize);  
  
   09. 
   var numHeight:uint=Math.ceil(img.height/blockSize);  
  
   10. 
   var numTotal:uint=numWidth*numHeight;  
  
   11. 
   var pt:Point = new Point(0, 0);  
  
   12. 
   var ary_blocks:Array=[];  
  
   13. 
   var sp:Sprite=new Sprite();  
  
   14. 
   init();  
  
   15. 
   function init() {  
  
   16. 
       btn1.txt.text="Explode";  
  
   17. 
       btn2.txt.text="Recovery";  
  
   18. 
       btn1.addEventListener(MouseEvent.CLICK,explode);  
  
   19. 
       btn2.addEventListener(MouseEvent.CLICK,recovery);  
  
   20. 
       sp.x=100;  
  
   21. 
       sp.y=90;  
  
   22. 
       addChild(sp);  
  
   23. 
       initBitmap();  
  
   24. 
   }  
  
   25. 
   function initBitmap(){  
  
   26. 
       for (var i:uint=0; i<numTotal; i++) {  
  
   27. 
           var bmd_tmp:BitmapData=new BitmapData(blockSize,blockSize,true,0);  
  
   28. 
           var rect:Rectangle = new Rectangle(blockSize*(i%numWidth), blockSize*int(i/numWidth), blockSize*(i%numWidth+1), blockSize*(int(i/numWidth)+1));  
  
   29. 
           bmd_tmp.copyPixels(bpd_source, rect, pt);  
  
   30. 
           var bp:Bitmap=new Bitmap();  
  
   31. 
           bp.bitmapData=bmd_tmp;  
  
   32. 
           bp.x=blockSize*(i%numWidth);  
  
   33. 
           bp.y=blockSize*int(i/numWidth);  
  
   34. 
           bp.name=String(i);  
  
   35. 
           sp.addChild(bp);  
  
   36. 
           ary_blocks.push(bp);  
  
   37. 
       }  
  
   38. 
   }  
  
   39. 
   function explode(_e:MouseEvent) {  
  
   40. 
       for each(var obj:Bitmap in ary_blocks) {  
  
   41. 
           TweenLite.to(obj,rand(0.6,1.2),{x:rand(-100,300),y:rand(-90,240),ease:Bounce.easeIn});  
  
   42. 
       }  
  
   43. 
   }  
  
   44. 
   function recovery(_e:MouseEvent) {  
  
   45. 
       for each(var obj:Bitmap in ary_blocks) {  
  
   46. 
           TweenLite.to(obj,rand(0.6,1.2),{x:blockSize*(int(obj.name)%numWidth),y:blockSize*int(int(obj.name)/numWidth)});  
  
   47. 
       }  
  
   48. 
   }  
  
   49. 
   function rand(_min:Number,_max:Number):Number {  
  
   50. 
       return Math.random() * (_max-_min) + _min;  
  
   51. 
   }

做法是先把图片转成Bitmap，然后嘛，把Bitmap分割成很多块BitmapData放入新的Bitmap，加入到显示容器里。
如果设置var blockSize=1，程序会直接崩溃哈哈。
在想办法把图片转换成点阵图，不过暂时没头绪，尝试了下Graphics来做，却不知道怎么拿到每个Point来位移=。=唉，还是不够了解Flash。。