關於將多張小圖片整合成一張完整的大圖的實例

最近公司這邊事情不是很多，所以就要多學點東西了，把學的先記下來，避免睡一覺又忘了。到時候想不起來，過來翻翻就好了。

這是繼上一篇的基礎上改的，沒有什么技術上的改進，上一篇用粒子組合成圖片，，圖片的寬高是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份的時候就開始卡了。

就寫這么多吧，要是寫得不好，就將就着看吧，慢慢改進。

每篇后面總要來點感悟，現在的師傅，都不願意教真的，但是這天下的事，沒有一頓肯德基解決不了的，要真有，那兩頓肯定也是解決不了的，所以最好是三頓！——楚雲實。

自天佑之，吉無不利！