TWaver - 專(zhuān)注UI技術(shù)

很早就有人做3D網(wǎng)頁(yè)版的化學(xué)元素周期表了，酷炫效果和新鮮技巧一度被眾多粉絲奉為神明，爭(zhēng)相研究和效仿。甚至有人放棄一切撲向這顆蠟燭，不由總是想到那個(gè)OPPO廣告女主角拽拽的鄙視道：“辭職去旅游！你敢嗎？”

俺不敢，不過(guò)用TWaver做一個(gè)也沒(méi)用幾個(gè)小時(shí)。所以就老在想：不就旅個(gè)游么，至于嘛？

這個(gè)3D元素周期表做了一些改進(jìn)：卡片上增加了漢字及拼音讀音，原因你懂得——各位程序猿沒(méi)幾個(gè)敢大聲讀這些漢字的。還好每個(gè)字的主要部分還大都認(rèn)識(shí)，多少可以小聲蒙一下，加上拼音就少了許多尷尬。另外在形狀布局和特效上也豐富了一點(diǎn)，具體可以看下方視頻連接。

技術(shù)上來(lái)說(shuō)，用TWaver 3D來(lái)做的思路略有不同。最開(kāi)始網(wǎng)上這個(gè)程序是使用HTML5、CSS3、WebGL、THREE.js、TWEEN.js等技術(shù)做的。使用TWaver就不用這么麻煩了，直接一個(gè)mono.js就差不多搞定了。技術(shù)上依舊是WebGL+js，但沒(méi)有使用CSS3和其他框架。效果和效率都很好。

實(shí)現(xiàn)上難度不大，大概思路如下：

1. 用數(shù)組定義好化學(xué)元素周期表的數(shù)據(jù)。包括編號(hào)、漢字、拼音、數(shù)值、英文等等。然后在內(nèi)存中動(dòng)態(tài)生成每個(gè)元素對(duì)應(yīng)的圖片卡，并轉(zhuǎn)成base64格式的內(nèi)存url字符串。注意圖片的格式、透明度、顏色等細(xì)節(jié)；
2. 為每個(gè)化學(xué)元素new一個(gè)3D立方體，并把內(nèi)存圖片貼圖到立方體正面。立方體的厚度0就行了，其他面都透明即可；
3. 監(jiān)聽(tīng)鼠標(biāo)事件。當(dāng)鼠標(biāo)over每個(gè)物體時(shí)，讓立方體發(fā)光；點(diǎn)擊物體時(shí)，讓立方體動(dòng)畫(huà)反轉(zhuǎn)一圈；
4. 計(jì)算好幾個(gè)形狀布局對(duì)應(yīng)的空間坐標(biāo)，并事先記錄到每個(gè)立方體的client屬性表中。例如：node.setClient(‘grid’,{x:100,y:340});
5. 放幾個(gè)按鈕，每個(gè)按鈕點(diǎn)擊后，讓所有的立方體到對(duì)應(yīng)的形狀的位置上去，同時(shí)啟用動(dòng)畫(huà)機(jī)制；

實(shí)際代碼中，也要留意一些注意事項(xiàng)：

1. 動(dòng)畫(huà)：當(dāng)?shù)谝淮蝿?dòng)畫(huà)尚未執(zhí)行完畢，用戶又點(diǎn)擊其他按鈕執(zhí)行新動(dòng)畫(huà)時(shí)，需要先判斷當(dāng)前有無(wú)正在運(yùn)行的動(dòng)畫(huà)，并及時(shí)讓動(dòng)畫(huà)停止。同時(shí)還要判斷是否需要把數(shù)值恢復(fù)成初始值或動(dòng)畫(huà)正常結(jié)束所設(shè)定的值。這里如不仔細(xì)處理，可能會(huì)導(dǎo)致動(dòng)畫(huà)將卡片的位置、角度錯(cuò)亂。
2. 布局：球形、螺旋、隨機(jī)等空間點(diǎn)其實(shí)都很好計(jì)算。尤其球形布局，開(kāi)始大家可能會(huì)去尋找“在一個(gè)半徑為r的球形表面均勻散布n個(gè)點(diǎn)，求每個(gè)點(diǎn)的坐標(biāo)？”這樣的題目。這樣就把問(wèn)題復(fù)雜化了。因?yàn)楹?jiǎn)單的視覺(jué)布局并不需要特別嚴(yán)謹(jǐn)?shù)奈恢脭?shù)值，所以大致把球進(jìn)行徑向和橫向切片進(jìn)行數(shù)值插入即可；
3. 貼圖：最開(kāi)始，我們可能會(huì)覺(jué)得程序是使用了100張小圖片進(jìn)行貼圖。但實(shí)際上，由于每個(gè)卡片的區(qū)別僅僅是文字，所以完全可以在內(nèi)存動(dòng)態(tài)生成。這樣速度快節(jié)省了網(wǎng)絡(luò)下載圖片的時(shí)間以及維護(hù)圖片的麻煩，同時(shí)文字和圖片等樣式也更容易控制。這也都是HTML5的canvas技術(shù)為大家?guī)?lái)的好處。
4. 物體朝向：在布局過(guò)程中，每個(gè)卡片的旋轉(zhuǎn)和朝向是一個(gè)要考慮的問(wèn)題。例如球形，每個(gè)卡片要面向球形圓心發(fā)射線的外方向，螺旋形卡片則朝向水平外方向，等等。計(jì)算這些坐標(biāo)和角度需要很多數(shù)學(xué)運(yùn)算，光是求坐標(biāo)系和直角坐標(biāo)系轉(zhuǎn)換之類(lèi)的就夠大家忙活一陣子了。而用TWaver就簡(jiǎn)單了：每個(gè)物體直接lookAt一個(gè)點(diǎn)就行了。例如球形卡片，每幀動(dòng)畫(huà)只要執(zhí)行：node.lookAt(0,0,0)就行了，對(duì)嗎？還不完全對(duì)。這樣lookAt到中心點(diǎn)，不就“屁股”朝外了嗎？用戶看到的字是卡片的背面，是反的。要解決也簡(jiǎn)單，應(yīng)當(dāng)讓它lookAt自己坐標(biāo)兩倍的地方，也就是圓心放射線的外面：node.lookAt(x*2, y*2, z*2)，這樣就對(duì)了。
5. 發(fā)光。鼠標(biāo)over每個(gè)物體，都會(huì)看到發(fā)光。而鼠標(biāo)over在光暈位置，卻不會(huì)觸發(fā)over事件。這是怎么做到的呢？其實(shí)也是小技倆，大家可以看看程序，自己研究吧。

生成內(nèi)存圖片代碼片段：