|
周末閑在家確實(shí)無(wú)聊。宅的不成樣子了。偶然發(fā)現(xiàn)國(guó)外一個(gè)web設(shè)計(jì)的網(wǎng)站上有一個(gè)3D時(shí)鐘。頓時(shí)來(lái)了興趣。其實(shí)一看代碼,不是svg,也不是canvas,而是簡(jiǎn)單的利用層級(jí)關(guān)系,大小關(guān)系作了一個(gè)視覺(jué)差。看起來(lái)會(huì)有立體運(yùn)動(dòng)的感覺(jué)。
于是,借著源碼,我稍微把它整理一下,利用閉包規(guī)避了它大量的全局變量,稍微封裝了一下,增加了幾項(xiàng)可配置性。覺(jué)得好玩,分享給大家。
這個(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í)庫(kù):我們?nèi)钡牟皇羌夹g(shù),而是創(chuàng)意...,轉(zhuǎn)載需保留來(lái)源!
鄭重聲明:本文版權(quán)歸原作者所有,轉(zhuǎn)載文章僅為傳播更多信息之目的,如作者信息標(biāo)記有誤,請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除,多謝。