「文字」聚合、散出動畫-轉自奇舞團

本文介紹一個文字聚合、散出效果的動畫效果，先看 demo

Chinese tea cups, wholesale Chinese tea cups

demo借鑑了 智能社首頁圖片輪播效果。接下來介紹聚合、散出效果的實現方法。

首先定義一個容器元素

<div class="ctn"></div>

而後，將這個容器的寬高劃分紅數塊。

var oDiv = document.getElementByClassName('ctn')[0];
    var C=4;  //劃分的列數
    var R=8;  //劃分的行數

    //容器的中心點X座標（相對於容器的左上角）
    var divCX=oDiv.offsetWidth/2;  

    //容器的中心點Y座標（相對於容器的左上角）
    var divCY=oDiv.offsetHeight/2;

接下來在容器內生成C * R 個 div。

for(var i=0;i<R;i++)
    {
        for(var j=0;j<C;j++) {                
            var oNewDiv=document.createElement('div'); 

            //接下來給 oNewDiv 設置初始狀態
            ...
        }
    }

並給 oNewDiv 設置初始狀態：left、 top、 背景位置、transform值

var w=Math.floor(oDiv.offsetWidth/C);  //小塊的寬度
    var h=Math.floor(oDiv.offsetHeight/R); //小塊的高度
    var offsetLeft = j*w; //新元素的left值
    var offsetTop = i*h;  //新元素的top值
    var l=offsetLeft+w/2; // 新元素的中心點x座標（相對於容器的左上角）
    var t=offsetTop+h/2;  // 新元素的中心點y座標（相對於容器的左上角）

    //容器中心點到新元素中心點向量（簡化形式）
    var disX=l-divCX;  //初始的translateX值 
    var disY=t-divCY;  //初始的translateY值


    oNewDiv.style.left = offsetLeft + 'px';  //新元素的left值
    oNewDiv.style.top = offsetTop + 'px';    //新元素的top值
    oNewDiv.style.backgroundPosition = '-'+offsetLeft+'px -'+offsetTop+'px';  //背景位置

    oNewDiv.style.WebkitTransform='perspective(800px) translate3d('+disX+'px, '+disY+'px, 600px) rotateY('+rnd(-180, 180)+'deg) rotateX('+rnd(-180, 180)+'deg) scale(2,2)';  //初始的transform值

    oNewDiv.style.opacity=0;    //初始的透明度爲0

接下來讓新元素飛到聚合狀態，醬紫就會出現一張完整的「拼圖」~

(function (oNewDiv, disX, disY){
        setTimeout(function (){
            oNewDiv.style.WebkitTransform='translate3d(0,0,0)';
            oNewDiv.style.opacity=1;
        }, rnd(300, 500));
    })(oNewDiv, disX, disY);

其中動畫簡單用過渡來實現： transition: 0.6s all ease 。

以上就是聚合效果的實現，至於散開效果，把 oNewDiv.style.WebkitTransform 的初始值和結束值反過來便可。完整的實現請看 demo