Flash AS3仿小米手机锁屏效果

昨天有个同事说喜欢小米手机的锁屏效果，仔细看了下，还真有点意思，于是就想用Flash仿一下，上午就挤时间摆弄了下，不是很像，但还是发出来献丑下吧。

下面就说一下我的思路，其实比较简单，关键就在于怎么分解过程的动画。

1.对舞台做屏幕截图，添加到舞台，然后移除舞台上其它元素，把舞台背景涂黑。

2.针对这个屏幕截图，就可以做各种操作了。我的动画思路是先压缩高度到3px同时拉伸宽度2倍，并对截图做颜色变亮的转换。

结束后再压缩宽度到0，同时高度也压缩到0，过程中缓冲动画使用了Quad.easeOut

中间也可以加一点滤镜。

这中间的同步动画就用了上次讲的利用TweenNano的onUpdate回调函数来实现。只需要计算一下对应的转换比例。

下面就是这个动作的部分源代码。

public function lockScreen(d:Sprite):void
{
	var bmpd:BitmapData = new BitmapData(d.width, d.height);
	bmpd.draw(d);
	var bmp:Bitmap = new Bitmap(bmpd);
	d.addChild(bmp);
	while (d.numChildren > 1)
	{
		d.removeChildAt(0);
	}
	d.graphics.beginFill(0);
	d.graphics.drawRect(0, 0, d.width, d.height);
	d.graphics.endFill();
	
	var dWidth:Number = d.width, dHeight:Number = d.height;
	var minHeight:Number = 3,fBlur:Number=10,maxWidth:Number=dWidth*2;
	
	var gFilter:GlowFilter = new GlowFilter(0xffffff, 1, 0, 0);
	bmp.filters = [gFilter];
	var ctrans:ColorTransform = bmp.transform.colorTransform;
	
	var t:TweenNano = TweenNano.to(bmp, .2, { height: minHeight,width:maxWidth,x:(dWidth-maxWidth)*.5, y: (dHeight - minHeight) * .5,ease:Quad.easeIn,
			onUpdate:function():void {
				var ratio:Number = ((dHeight - minHeight)-(bmp.height - minHeight)) / (dHeight - minHeight);
				gFilter.blurX = ratio * fBlur;
				gFilter.blurY = gFilter.blurX;
				bmp.filters = [gFilter];
				ctrans.redOffset = 255 * ratio;
				ctrans.greenOffset = 255 * ratio;
				ctrans.blueOffset = 255 * ratio;
				bmp.transform.colorTransform = ctrans;
			},
	onComplete:function():void {
		
		t = TweenNano.to(bmp, .15, { width:0,ease:Quad.easeIn, onUpdate:function():void {
			
			var ratio:Number = bmp.width/maxWidth;
			bmp.x = (dWidth - bmp.width) * .5;
			bmp.height = ratio * minHeight;
			bmp.y = (dHeight - bmp.height) * .5;
			gFilter.blurX = ratio * fBlur;
			gFilter.blurY = gFilter.blurX;
			bmp.filters = [gFilter];
		},onComplete:function():void {
			removeChild(bmp);
			destroy();
		}})
		
	}});
}

不过目前这个动画效果还不理想，回去再仔细比对下小米的效果再做改进。