关于将多张小图片整合成一张完整的大图的实例

最近公司这边事情不是很多，所以就要多学点东西了，把学的先记下来，避免睡一觉又忘了。到时候想不起来，过来翻翻就好了。

这是继上一篇的基础上改的，没有什么技术上的改进，上一篇用粒子组合成图片，，图片的宽高是100*100的。宽高都是每隔一个像素取的，再除去透明的，其总粒子数都有1914个粒子了，这要是换张大图，iPhone6的375*667的话，那就得6W多个粒子了，这显然是不合理的，实际测的时候4000个粒子，就已经卡了，更别说6W个了，所以这才考虑到接下来的这种做法。

跟之前的粒子聚合成图片的思想是一样的，只是这里将每一个粒子换成一整张图片的一小部分。

这里我就不贴完整代码了，因为上一篇的代码已经说得很详细了，这里只贴点重要的部分，套路跟之前的是一样的。

总是说上一篇，这里是上一篇的链接：http://www.cnblogs.com/chuyunshi/p/6913753.html；

其实，上一篇，是在上上一篇的基础上写的。。。。不过没关系，上一篇已经贴了完整的，全篇注释的代码了

首先是几个变量：

　　　　　　　　　　page.num=0;
                //用来标记点击的
                page.click = 0;
                //原始图片的宽高
                page.imgW = 750;
                page.imgH = 1334;
                //图片的份数，这里是20*25份
                page.numW= 20;
                page.numH = 25;
                //用来存放每一个小图片的属性
                page.picArray=[];

然后是点击屏幕的两个动画：

animate:function(){
                    for(var i=0; i<page.picArray.length; i++){
                        page.picArray[i][0].x -= page.picArray[i][3]*30;
                       /* if(page.picArray[i][0].x<0){
                            page.picArray[i][0].x = pageW
                        }
                        if(page.picArray[i][0].x>pageW){
                            page.picArray[i][0].x=0
                        }*/

                        page.picArray[i][0].y -= page.picArray[i][4]*30;
                       /* if(page.picArray[i][0].y<0){
                            page.picArray[i][0].y = pageH
                        }
                        if(page.picArray[i][0].y>pageH){
                            page.picArray[i][0].y=0
                        }*/
                    }
                },
                animate2:function(){
                    page.num+=10;
                    if(page.num>=page.picArray.length){
                        page.num = page.picArray.length
                    }

                    for(var i=0; i<page.num; i++){

                        page.picArray[i][0].x -= (page.picArray[i][0].x-(page.picArray[i][1]))/30;
                        page.picArray[i][0].y -= (page.picArray[i][0].y-(page.picArray[i][2]))/30;
                        page.picArray[i][0].alpha -= (page.picArray[i][0].alpha-1)/30;

                       // page.picArray[i][0].rotation -= (page.picArray[i][0].rotation-0)/30;
                        page.picArray[i][0].scaleX -= (page.picArray[i][0].scaleX-page.scaleX)/30;
                        page.picArray[i][0].scaleY -= (page.picArray[i][0].scaleY-page.scaleY)/30
                    }
                },

animate:是让图片离散的动画，注释掉的部分是超出屏幕从另一端显示出来，这里就没让他显示出来了；

animate2:是让小图片聚合成一张完整的大图的动画，

这里是刚开始聚合的效果图：

这里是在此点击页面，图片分散的效果图：

这是链接：https://chuyunshi.github.io/Example/chuyunshi-canvas/demo/demo7.html //2017/6/1/14:58

这里是核心代码：

getImagedata:function(){
                    stage = new createjs.Stage("canvas");
                    //var bg = new createjs.Bitmap("./../img/001.jpg");
                    for(i=0;i<page.numW;i++){
                        for(j=0;j<page.numH;j++){
                            var bg = new createjs.Bitmap("./../img/001.jpg");
                            var rect = new createjs.Rectangle(i*page.imgW/page.numW,j*page.imgH/page.numH,page.imgW/page.numW,page.imgH/page.numH);
                            bg.sourceRect = rect;
                            bg.x=pageW*Math.random();
                            bg.y=pageH*Math.random();
                            var a =i*page.imgW/page.numW*page.scaleX;
                            var b =j*page.imgH/page.numH*page.scaleY;
                            var movex = (1-Math.random()*2);
                            var movey = (1-Math.random()*2);
                            bg.scaleX=Math.random();
                            bg.scaleY=Math.random();
                           // bg.rotation=Math.random()*90;
                            bg.alpha = Math.random()
                            page.picArray.push([bg,a,b,movex,movey]);
                            stage.addChild(bg);
                        }
                    }
                    //帧率
                    createjs.Ticker.setFPS(60);
                    //更新阶段将呈现下一帧
                    createjs.Ticker.addEventListener("tick", page.canVas.tick);
                }

其实加在一起也没几句，

到这，基本就结束了，这里的图片我是拆分成500份。测试拆成2000份是没问题的，4000份的时候就开始卡了。

就写这么多吧，要是写得不好，就将就着看吧，慢慢改进。

每篇后面总要来点感悟，现在的师傅，都不愿意教真的，但是这天下的事，没有一顿肯德基解决不了的，要真有，那两顿肯定也是解决不了的，所以最好是三顿！——楚云实。

自天佑之，吉无不利！