晚上在逛天地会时,看到一个关于TweenLite的示例,觉得蛮实用的,整理了一下偷过来:)
注:播放完后,鼠标猛击胸部即可重放:)
思路点评:刚开始看到这个效果时,觉得应该蛮复杂的,后来看了代码之后,发现居然如此简单! 关键:先加载一张完整的图片,然后利用BitmapData的copyPixels功能,把每个小块的像素copy出来,形成一系列新的BitmapData(也就是一块块小图片),然后再利用TweenLite让其依次(延时)移动即可。
代码:
package { import flash.display.Sprite; import flash.display.BitmapData; import flash.geom.Rectangle; import flash.display.Bitmap; import flash.geom.Point; import flash.events.MouseEvent; import gs.TweenLite; import gs.easing.Back; public class ImageUp extends Sprite { var _originalImageData:BitmapData; var _cols:uint = 5; var _rows:uint = 5; var _imgArr:Array = new Array(); var _w:Number = 0; var _h:Number = 0; var _flag:Boolean = false; public function ImageUp() { init(); } private function init():void { _originalImageData = new MiMi();//MiMi是库中导入的一张图片 //计算每个小块的宽度、高度 _w = _originalImageData.width / _cols; _h = _originalImageData.height / _rows; var i:uint = 0,j:uint = 0; for (i=0; i<_rows; i++) { for (j=0; j<_cols; j++) { var _imgCell:BitmapData = new BitmapData(_w,_h); //关键:从原图中复制相应的小区域像素到imgCell中 _imgCell.copyPixels(_originalImageData, new Rectangle(j*_w,i*_h,_w,_h), new Point()); var _sprite:Sprite = new Sprite(); _sprite.addChild(new Bitmap(_imgCell)); //定位 _sprite.x = j * _w; _sprite.y = i * _h; this.addChild(_sprite); _imgArr.push(_sprite); } } this.stage.addEventListener(MouseEvent.CLICK,mouseClick); begin(); } private function mouseClick(e:MouseEvent) { begin(); } private function begin():void { for (var i:uint=0,j=_imgArr.length; i<j; i++) { TweenLite.from(_imgArr[i],0.5,{delay:0.1*i,y:(_flag?-1:1)*_h*_rows,alpha:0,ease:Back.easeOut}); } _flag = !_flag; } } }