周末閑在家確實(shí)無聊。宅的不成樣子了。偶然發(fā)現(xiàn)國外一個(gè)web設(shè)計(jì)的網(wǎng)站上有一個(gè)3D時(shí)鐘。頓時(shí)來了興趣。其實(shí)一看代碼，不是svg，也不是canvas，而是簡單的利用層級(jí)關(guān)系，大小關(guān)系作了一個(gè)視覺差。看起來會(huì)有立體運(yùn)動(dòng)的感覺。

　　于是，借著源碼，我稍微把它整理一下，利用閉包規(guī)避了它大量的全局變量，稍微封裝了一下，增加了幾項(xiàng)可配置性。覺得好玩，分享給大家。
　　這個(gè)效果主要有兩個(gè)核心的變換，一個(gè)是時(shí)鐘整體圓周的變化，一個(gè)是組成時(shí)鐘的小元素的位置和層級(jí)的變化。
　　核心變換代碼主要有兩段：

    mainloop: function () {
        // rotations
        _dir == 'left' ? A-=0.1 : A+=0.1;
        rx+=px;
        ry+=py;
        crx=Math.cos(rx);
        srx=Math.sin(rx);
        cry=Math.cos(ry+Math.PI/2);
        sry=Math.sin(ry+Math.PI/2);
        // return to the horizontale
        rx*=.9; ry*=.9; px*=.9; py*=.9;
        // refresh time
                .
                .
                .
        // call animation
        for(var i in O){
            for(var j in O[i].O){
                O[i].O[j].anim();
            }
        }
        setTimeout(arguments.callee,32);
    }        

        

        
        
      
        
it知識(shí)庫：我們?nèi)钡牟皇羌夹g(shù)，而是創(chuàng)意...，轉(zhuǎn)載需保留來源！
        
鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。