前段时间看同事用的linux，窗体最小化，还原，以及打开的时候，都会有不同的效果，其中有个类似破碎的玻璃，重新组合的效果。

要做这个效果，首先需要将窗体截图，然后将截图随机分解成n个小三角形区域。
最先我考虑的方法是在图片的范围内随机生成几个点，然后让点两两相连，连成三角形，并且在连接的时候检测线条不能和其他线相交。
这样就需要有一个三角形数组，每画一条新的线段的时候，就要遍历这个三角形数组，来检测线段是否和三角形中的线相交。
同时，这样做在检查是否有某些部分没有被画上三角形也比较困难。
总之这种方法会消耗很多的资源，并且有可能有遗漏的地方。

于是我思考有没有简单切分随机三角形的方法。

三角形其实可以被认为是四边形，连上一条对角线而产生的。
那么只要将图形，先分成多个四边形即可。
只要确保，横，纵坐标的点数量一致，便可以画出四边形，然后分解成三角形。
转换成代码即为：
bmp为视图对象
_point为点的数组

_avgDist为四边形边长的平均值

for(var i:uint = 0;i<=row;i++)
            {
                _point[i] = [];

                for(var j:uint = 0;j<col;j++)
                {
                    if( i==row )
                    {
                        _point[i][j] = {x:x,y:bmp.height};
                    }
                    else
                    {
                        _point[i][j] = {x:x,y:y};
                    }
                    x += (_avgDist/2*(Math.random()-0.5) + _avgDist );
                }
                _point[i][j] = {x:bmp.width,y:y};
                y += (_avgDist/2*(Math.random()-0.5) + _avgDist );
                x = 0;
            }




然后就是如何将原来的图像渲染的问题了。
只要使用graphics.beginBitmapFill，然后以面板的截图作为参数即可。

面板截图的方法可以使用BitmapData类的draw来画出。
实际上，每一行
就是n个小四边形组成，而每个小四边形则由两个三角形组成，渲染上原图，变成代码以后就是



            var shape:Shape;
            for( i = 0; i<row;i++)
            {
                for(j=0;j<col;j++)
                {
                    shape = new Shape();
                    shape.graphics.beginBitmapFill(bmp.bitmapData);
                    shape.graphics.moveTo(_point[i][j].x,_point[i][j].y);
                    shape.graphics.lineTo(_point[i][j+1].x,_point[i][j+1].y);
                    shape.graphics.lineTo(_point[i+1][j].x,_point[i+1][j].y);
                    shape.graphics.lineTo(_point[i][j].x,_point[i][j].y);
                    _triangles.push(shape);

                    shape = new Shape();
                    shape.graphics.beginBitmapFill(bmp.bitmapData);
                    shape.graphics.moveTo(_point[i+1][j].x,_point[i+1][j].y);
                    shape.graphics.lineTo(_point[i+1][j+1].x,_point[i+1][j+1].y);
                    shape.graphics.lineTo(_point[i][j+1].x,_point[i][j+1].y);
                    shape.graphics.lineTo(_point[i+1][j].x,_point[i+1][j].y);
                    _triangles.push(shape);

                }
            }
其中_triangles是用来保存三角形的数组。


这样就将一张完整的图片，分解成了大小不等的n个小三角形。

然后就是破碎效果了。

首先我让每个三角形的x，y坐标在图形大小的两倍范围内随机分布。alpha初始值为0，
rotation则为0~360度中的一个随机值。

然后使用TweenLite让其最终能回到0,0坐标，alpha回复为1。

写成代码则为：
            var len:uint = _triangles.length;
            for(var i:uint=0;i<len;i++)
            {
                var triangle:Shape = _triangles[i] as Shape;
                triangle.x = width*2*(Math.random() - 0.5 ) + width;
                triangle.y = height*2*(Math.random() - 0.5 ) + width;
                triangle.rotation = 360*Math.random();
                triangle.alpha = 0;
                addChild(triangle);
                TweenLite.to( triangle , 0.5 , {x:25,y:25,rotation:0, alpha:1});
            }


最终破碎的图形会在0.5秒之后，组合成为一个整图。
但是面板上原来可能是有按钮的，在效果开始前，需要先隐藏面板，效果结束后，需要将所有三角形移除，并且将面板显示出来。

这样就需要将 TweenLite.to( triangle , 0.5 , {x:25,y:25,rotation:0, alpha:1});
改为：
TweenLite.to( triangle , 0.5 , {x:25,y:25,rotation:0, alpha:1,onComplete:tweenCompleteHandler});

通过tweenCompleteHandler这个函数来处理效果结束后的事件。

        private var _c:uint;
       
        private function tweenCompleteHandler():void
        {
            var len:uint = _triangles.length;
            if(++_c == len)
            {
                bmp.visible = true;
                for(var i:uint=0;i<len;i++)
                {
                    removeChild(_triangles[i]);
                    delete _triangles[i];
                }
            }
           
        }

其中_c是用来记录次数，当次数达到和三角形的数量一致时，说明所有三角形都到达正确的位置。