javascript-按圓形排列DIV元素(二)---- 運動

javascript-按圓形排列DIV元素(一)---- 運動

http://www.cnblogs.com/lufy/archive/2012/06/21/2558049.html

 

一、原理分析

　　1.1怎么才能讓DIV元素動起來？

　　動起來的實質，就是改變DIV的位置，也就是改變其left和top值;

　　2.2怎么上DIV元素動起來的時候，是在規定的圓周上面？

　　通過上一次的分析，讓DIV按圓形排隊，我們知道了，如要讓DIV定位在圓周上面，主要是根據角度(弧度)來實現的。

　　看下圖:

上圖中，我們B元素和C元素的定位是如何實現的？根據上一次講的公式,如下：

(index:元素的索引值，radius半徑，dotLeft：圓心的橫坐標，dotTop：圓心的縱坐標)

B的left = Math.sin((ahd*Bindex))*radius+dotLeft

B的top = Math.cos((ahd*Bindex))*radius+dotTop

C的left = Math.sin((ahd*Cindex))*radius+dotLeft

C的top = Math.cos((ahd*Cindex))*radius+dotTop

從公式中可以看出，都一樣，只是B和C的index，即索引值不一樣，從而讓角度（弧度）數不一樣，結果就是正弦和余弦的值不一樣，所以定位也就不一樣了，但結果都是在這個圓周上變化。不會跑離這個圓周;

如果我現在想讓B元素，定位到C元素的位置，該怎么做呢？

就是讓B元素的角度（弧度）和C元素的一樣，然后，套用上面的公式，就可以了。

B元素的現在的用的圓心角，是AOB，C元素用的圓心角，是AOC;  B元素和C元素之間相差了上圖中BOC這個角度（弧度）值，也就是兩個藍色線條之間的角度（弧度）;

得出結論：改變角度（弧度）就可以讓元素在圓周上改變位置;

 

二、實例分析

根據上面的分析，我們已經知道如何在圓周上，改變DIV的位了;現在我們要做的就是怎么去改變才能讓元素看起來是在運動？

是“速度”;有運動就會有速度

速度就是在規定時間內移動的距離：速度 = 距離/時間

速度太快就是“瞬間移動”讓B移動到C;

速度慢，就可以看到B一點點向C的位置移動;

時間：在Javascript里的時間：就是用的setInterval(....,時間)  

例如：setInterval(移動,1000)  我們規定間隔1000毫秒，讓元素做移動。

在本例中的移動：就是改變DVI的left和TOP值，而要改變這個值，需要用到上面的圓周上移動的公式;

速度：設一個速度 speed = 5;

這里的5，就是角度，即讓圓心角，每1000毫秒，變化5度。

speed =  speed*Math.PI/180;將這個變化的角度轉換成弧度，因為Math.sin只接受弧度單位的參數;

得出：

function 移動(){

　　speed ++

　　left = Math.sin((ahd*Bindex+speed ))*radius+dotLeft;

　　Math.cos((ahd*Bindex+speed))*radius+dotTop

}

 

三、實現代碼：

    $(function(){
        //中心點橫坐標
        var dotLeft = ($(".container").width()-$(".dot").width())/2;
        //中心點縱坐標
        var dotTop = ($(".container").height()-$(".dot").height())/2;
        //起始角度
        var stard = 0;
        //半徑
        var radius = 200;
        //每一個BOX對應的角度;
        var avd = 360/$(".box").length;
        //每一個BOX對應的弧度;
        var ahd = avd*Math.PI/180;
        //運動的速度
        var speed = 2;
        

        //設置圓的中心點的位置
        $(".dot").css({"left":dotLeft,"top":dotTop});
        //設置DIV圓形排列
        $(".box").each(function(index, element){
            $(this).css({"left":Math.sin((ahd*index))*radius+dotLeft,"top":Math.cos((ahd*index))*radius+dotTop});
        });
        
        //運動函數
        var fun_animat = function(){
            
            speed = speed<360?speed:2;
            
            //運運的速度
            speed+=2;
            //運動距離，即運動的弧度數;
            var ainhd = speed*Math.PI/180;
            
            //按速度來定位DIV元素
            $(".box").each(function(index, element){
                $(this).css({"left":Math.sin((ahd*index+ainhd))*radius+dotLeft,"top":Math.cos((ahd*index+ainhd))*radius+dotTop});
             });
        }
        
        //定時調用運動函數
        var setAnimate = setInterval(fun_animat,100);
    })

 

其實也可以反過來思考，即每1000毫秒，我們獲得圓周上的一個坐標點，將這個點的left和TOP值，賦給，需要改變位置，即運動的DIV元素！~~

 

 

DEMO下載