這次帶給大家的案例是基于 Axure RP 8.0，利用了 8.0 所特有的新功能——旋轉(zhuǎn)。隨著對(duì) RP 8.0 的了解，我是越來越喜歡這個(gè)版本，尤其是這個(gè)新增的的“旋轉(zhuǎn)”功能，絕對(duì)是我做原型時(shí)的御用特效師（duang duang duang 的特效就靠它了）。

其實(shí)這個(gè)案例我已經(jīng)構(gòu)思了很長(zhǎng)時(shí)間，只是因?yàn)闀r(shí)間關(guān)系，一直都沒有實(shí)施，有時(shí)候畫原型、寫教程也是需要一點(diǎn)感覺的，感覺來了，事半功倍，沒有感覺，只會(huì)浪費(fèi)時(shí)間（這么說貌似有點(diǎn)矯情）。

（原型效果圖）

原型預(yù)覽

預(yù)覽地址：http://raedme.cn/axurelab/009_clock/index.html

制作過程

制作 Clock 時(shí)鐘原型，需要解決的核心問題有以下三個(gè)：

1. ?繪制時(shí)鐘部件，包括時(shí)針、分針、秒針、表盤等，當(dāng)然也可使用 PS 直接制作所需圖片，或上網(wǎng)尋找相關(guān)素材（本案例中的表盤為網(wǎng)上下載，表針均用 Axure 繪制）
2. 實(shí)現(xiàn)表針的旋轉(zhuǎn)和邏輯，這里是兩層概念，一層是要實(shí)現(xiàn)表針的旋轉(zhuǎn)動(dòng)作，二層是要處理好秒、分、時(shí)的遞進(jìn)邏輯關(guān)系，也就是秒針旋轉(zhuǎn)一周，分針要對(duì)應(yīng)的走一分，分針走一圈，相應(yīng)的時(shí)針要走一個(gè)點(diǎn)。
3. 當(dāng)原型預(yù)覽時(shí)，可以動(dòng)態(tài)顯示當(dāng)前系統(tǒng)時(shí)間。

明確了以上問題后，接下來就可以動(dòng)手畫原型了。

Ⅰ.繪制時(shí)鐘部件

表盤可以自行繪制，也可從網(wǎng)上下載相應(yīng)圖片（上圖中的表盤為網(wǎng)上下載）。

繪制表針的時(shí)候需要注意一點(diǎn)，就是要考慮到對(duì)表針進(jìn)行旋轉(zhuǎn)的時(shí)候需要有一個(gè)軸心，在上圖中可以看到我的表針下端都有一些空白區(qū)域，這個(gè)是為了保證整個(gè)表針部件的中心位置正好是表針旋轉(zhuǎn)的軸心，而后面的旋轉(zhuǎn)動(dòng)作也是加在表針部件的中心位置。

另外一個(gè)就是可以通過形狀的運(yùn)算及組合來形成一個(gè)表針部件，但是在時(shí)間過程中發(fā)現(xiàn)，旋轉(zhuǎn)組合后的部件，在瀏覽器預(yù)覽效果的時(shí)候容易導(dǎo)致部件錯(cuò)位，因此建議將表針轉(zhuǎn)化為 PNG 圖片，這樣可以保證原型預(yù)覽時(shí)旋轉(zhuǎn)效果的完美。

第三個(gè)需要注意的點(diǎn)就是，將表盤、時(shí)針、分針、秒針組合在一起的時(shí)候，需要絕對(duì)的中心重合，這個(gè)時(shí)候需要考慮到各個(gè)部件的尺寸問題，居中排列是可以保證兩邊的距離都是 1 個(gè)完整的像素（如果出現(xiàn) 0.5 個(gè)像素可能會(huì)有問題）。

那么基于以上幾點(diǎn)，在加上你的耐心細(xì)致，相信很快就可以搞定一套時(shí)鐘部件。那么接下來就進(jìn)入我們第二個(gè)過程。

Ⅱ. 時(shí)鐘走時(shí)邏輯

這個(gè)過程就是要讓時(shí)鐘動(dòng)起來，并且可以正確的走時(shí)。動(dòng)起來自然是給時(shí)針加上相關(guān)動(dòng)作，但是正確的走時(shí)就需要一個(gè)完整而又合理的邏輯。

① 添加 3 個(gè)輔助部件——文本框，分別命名為“時(shí)”、“分”、“秒”，并分別用來顯示時(shí)、分、秒，由于文本框有一個(gè)特殊的事件——文本改變時(shí)，所以可以利用這個(gè)事件實(shí)現(xiàn)計(jì)時(shí)以及循環(huán)觸發(fā)所需事件。

② 在“秒”文本框上增加如下事件：

【解釋】

Case 1：當(dāng)文本框“秒”的值等于 59 時(shí)，等待 1 秒，設(shè)置 time（time 為第 4 個(gè)文本框的名稱）?的值為當(dāng)前時(shí)間，順時(shí)針旋轉(zhuǎn)秒針 6°（因?yàn)橐蝗?60 秒 360°，所以每秒 6°），設(shè)置文本框“秒”的值等于 0（因?yàn)?59 的下一秒是 0），設(shè)置文本框“分”的值 +1（因?yàn)槊脶樧叩?59 后，再過 1 秒，分針要 +1），順時(shí)針旋轉(zhuǎn)分針 6°（因?yàn)榉轴樧?1 分旋轉(zhuǎn)的角度是 6°），順時(shí)針旋轉(zhuǎn)時(shí)針到“當(dāng)前時(shí)*30°+當(dāng)前分/2°”的位置（這個(gè)請(qǐng)仔細(xì)體會(huì)一下）。

Case 2：其他情況，等待 1 秒，設(shè)置 time 的值為當(dāng)前時(shí)間，順時(shí)針旋轉(zhuǎn)秒針 6°，設(shè)置文本框“秒”的值 +1。

③ 在“分”文本框上增加如下事件：

【解釋】

Case 1：當(dāng)文本框“分”的值等于 59 時(shí)，等待 60 秒，設(shè)置文本框“分”的值為 0，設(shè)置文本框“時(shí)”的值 +1。

④ 在文本框“時(shí)”上增加如下事件：

【解釋】

Case 1：當(dāng)文本框“時(shí)”的值等于 23 時(shí)，等待 3600 秒，設(shè)置文本框“時(shí)”的值為 0。

到這里就完成了時(shí)鐘走時(shí)的邏輯，那接下來就是解決如何在原型預(yù)覽時(shí)（也就是頁面加載時(shí)）獲取當(dāng)前系統(tǒng)時(shí)間。

Ⅲ.獲取當(dāng)前系統(tǒng)時(shí)間

由于上一步中時(shí)針走時(shí)用到了 3 個(gè)輔助文本框，分別表示時(shí)、分、秒，那在這一步，獲取當(dāng)前系統(tǒng)時(shí)間的時(shí)候，我也采用單獨(dú)獲取的方式，也就是單獨(dú)獲取當(dāng)前的時(shí)、分、秒，然后賦值給文本框“時(shí)”、“分”、“秒”。

【解釋】

Case 1：第一個(gè) Set 是把獲取的當(dāng)前系統(tǒng)時(shí)間的時(shí)、分、秒分別復(fù)制為文本框 “時(shí)”、“分”、“秒”；第二個(gè) Rotate 是根據(jù)當(dāng)前獲取的時(shí)分秒，來分別將時(shí)針、分針、秒針旋轉(zhuǎn)到指定的位置。

當(dāng)時(shí)鐘讀取并顯示了當(dāng)前系統(tǒng)時(shí)間后，就會(huì)按照之前設(shè)置好的走時(shí)邏輯繼續(xù)走時(shí)，并可以和當(dāng)前系統(tǒng)時(shí)間保持同步（不同瀏覽器會(huì)出現(xiàn)不同步的情況，本人測(cè)試 Edge 和 IE11 瀏覽器兼容效果最好）。

Ⅳ.總結(jié)

OK，到這里整個(gè)案例就講完了，而且文中也講述了所有的事件、動(dòng)作、邏輯，接下來感興趣的小伙伴就需要自己去動(dòng)手實(shí)踐了。當(dāng)然如果有更好的方式方法也歡迎與我交流（微信：urmagic）。

原型下載：

http://pan.baidu.com/s/1nuWP2Zn ??密碼: dtbf

本文由 @RAEDME大鵬 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。