圖片爆炸效果

這個需求是昨天碰到的，怎麼說呢，怪怪的，主要是想不出可以模擬爆炸效果的公式。
先來看Demo：


OK，接下去看下具體實現過程：

view sourceprint?

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。。