“文字”聚合、散出动画-转自奇舞团

本文介绍一个文字聚合、散出效果的动画效果，先看 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