編輯導(dǎo)語：通過Axure，我們可以實(shí)現(xiàn)動(dòng)態(tài)鐘表轉(zhuǎn)動(dòng)，但是如何快速而簡單的實(shí)現(xiàn)這一功能呢？本文作者通過實(shí)際的實(shí)踐操作，為我們做出了示范和總結(jié)。

看到幾篇關(guān)于鐘表動(dòng)態(tài)的原型設(shè)計(jì)，感覺都好麻煩，用了超級(jí)多的秒針分針和時(shí)針之間的來回加減來計(jì)算旋轉(zhuǎn)角度；這篇文章將講解不一樣的制作方法，簡單易懂（工具：axure9）。

我覺得做原型不涉及到函數(shù)的制作起來還是很快的（當(dāng)然，涉及到中繼器這個(gè)還是有點(diǎn)深的，我也玩了很久，差不多可以實(shí)現(xiàn)一些復(fù)雜的交互，以后有時(shí)間在寫），知道原理后就不會(huì)太復(fù)雜，這篇用到了動(dòng)態(tài)面板和簡單的獲取日期函數(shù)（右下角為鐘表）。

利用到了函數(shù)：

• 獲取當(dāng)前系統(tǒng)的小時(shí)：[[Now.getUTCHours()]];（這個(gè)函數(shù)用的時(shí)候發(fā)現(xiàn)總是比系統(tǒng)時(shí)間多4個(gè)小時(shí)，不知道是什么原因，需要減去才行，你們可以嘗試一下
• 獲取當(dāng)前系統(tǒng)的分鐘：[[Now.getUTCMinutes()]]
• 獲取當(dāng)前系統(tǒng)的秒數(shù)：[[Now.getUTCSecond()]]

一、基本元件

1. 圓形*2（其實(shí)一個(gè)就夠了，兩個(gè)為了好看一點(diǎn)點(diǎn)）
2. 動(dòng)態(tài)面板*3（3個(gè)狀態(tài)命名為：秒針、分針、時(shí)針）
3. 線段*3（分別代表時(shí)針、分針、秒針）
4. 齒輪*1（可有可無）

二、思路

獲取當(dāng)前系統(tǒng)的時(shí)間，利用動(dòng)態(tài)面板來回交互，可以實(shí)時(shí)刷新獲取的時(shí)間，進(jìn)而進(jìn)指針可以不停的旋轉(zhuǎn)。需要注意的點(diǎn)：每個(gè)動(dòng)態(tài)面板里的組件必須重合，不然將會(huì)出現(xiàn)表針不重合。

三、詳細(xì)添加交互

將時(shí)針、分針、秒針分別放到三個(gè)動(dòng)態(tài)面板中，然后先添加秒針的動(dòng)作，載入時(shí)-設(shè)置動(dòng)態(tài)面板（下一項(xiàng)，循環(huán)，1000ms），在設(shè)置：狀態(tài)改變時(shí)-旋轉(zhuǎn)（線段-[[Now.getUTCSecond()*6]]-錨點(diǎn)：中間位置），為什么乘以6，因?yàn)閳A360除以60的鐘表格，每格是6度。

分針：和秒針一樣，函數(shù)換成[[Now.getUTCMinutes()*6]]，為什么分針也乘6？和秒針一樣，分針一格代表6度，獲取當(dāng)前系統(tǒng)的時(shí)間 分*6就是旋轉(zhuǎn)的角度。

時(shí)針：[[(((Now.getUTCHours()-4)*30)+((Now.getUTCMinutes()/60)*5)).toFixed(0)]]，時(shí)針?biāo)悸泛兔脶?、分針一樣，只是要加上?dāng)前分針的值，函數(shù)中減4是前面說的會(huì)比當(dāng)前時(shí)多四。

這里減去，時(shí)針走一下是30度，加上分的值：（當(dāng)前的分除以60）乘以5；后面的函數(shù)：.toFixed(0)，因?yàn)榧由戏值闹悼赡転樾r(shí)，我們這里要取整。

這里就結(jié)束了，預(yù)覽可以看看有沒有實(shí)現(xiàn)；可以加點(diǎn)細(xì)節(jié)，如表盤、顏色區(qū)分美化一下，中間我的小齒輪就是自己加的，感覺多了點(diǎn)機(jī)械感。

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

題圖來自?Unsplash，基于 CC0 協(xié)議