2011/090
AS3-Effect explode 图片爆炸效果
这个需求是昨天碰到的，怎么说呢，怪怪的，主要是想不出可以模拟爆炸效果的公式。
先来看Demo：
OK，接下去看下具体实现过程：
import gs.TweenLite;
import gs.easing.Bounce;
var img:TmpImage=new TmpImage();
var bpd_source:BitmapData=new BitmapData(img.width,img.height,true,0);
bpd_source.draw(img);
var blockSize:uint=3;
var numWidth:uint=Math.ceil(img.width/blockSize);
var numHeight:uint=Math.ceil(img.height/blockSize);
var numTotal:uint=numWidth*numHeight;
var pt:Point = new Point(0, 0);
var ary_blocks:Array=[];
var sp:Sprite=new Sprite();
init();
function init() {
btn1.txt.text="Explode";
btn2.txt.text="Recovery";
btn1.addEventListener(MouseEvent.CLICK,explode);
btn2.addEventListener(MouseEvent.CLICK,recovery);
sp.x=100;
sp.y=90;
addChild(sp);
initBitmap();
}
function initBitmap(){
for (var i:uint=0; i<numTotal; i++) {
var bmd_tmp:BitmapData=new BitmapData(blockSize,blockSize,true,0);
var rect:Rectangle = new Rectangle(blockSize*(i%numWidth), blockSize*int(i/numWidth), blockSize*(i%numWidth+1), blockSize*(int(i/numWidth)+1));
bmd_tmp.copyPixels(bpd_source, rect, pt);
var bp:Bitmap=new Bitmap();
bp.bitmapData=bmd_tmp;
bp.x=blockSize*(i%numWidth);
bp.y=blockSize*int(i/numWidth);
bp.name=String(i);
sp.addChild(bp);
ary_blocks.push(bp);
}
}
function explode(_e:MouseEvent) {
for each(var obj:Bitmap in ary_blocks) {
TweenLite.to(obj,rand(0.6,1.2),{x:rand(-100,300),y:rand(-90,240),ease:Bounce.easeIn});
}
}
function recovery(_e:MouseEvent) {
for each(var obj:Bitmap in ary_blocks) {
TweenLite.to(obj,rand(0.6,1.2),{x:blockSize*(int(obj.name)%numWidth),y:blockSize*int(int(obj.name)/numWidth)});
}
}
function rand(_min:Number,_max:Number):Number {
return Math.random() * (_max-_min) + _min;
}
做法是先把图片转成Bitmap，然后嘛，把Bitmap分割成很多块BitmapData放入新的Bitmap，加入到显示容器里。
如果设置var blockSize=1，程序会直接崩溃哈哈。
在想办法把图片转换成点阵图，不过暂时没头绪，尝试了下Graphics来做，却不知道怎么拿到每个Point来位移=。=唉，还是不够了解Flash。。