起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識如何實現(xiàn)動態(tài)鐘表轉動？
編輯導語：通過Axure，我們可以實現(xiàn)動態(tài)鐘表轉動，但是如何快速而簡單的實現(xiàn)這一功能呢？本文作者通過實際的實踐操作，為我們做出了示范和總結。
看到幾篇關于鐘表動態(tài)的原型設計，感覺都好麻煩，用了超級多的秒針分針和時針之間的來回加減來計算旋轉角度；這篇文章將講解不一樣的制作方法，簡單易懂（工具：axure9）。
我覺得做原型不涉及到函數(shù)的制作起來還是很快的（當然，涉及到中繼器這個還是有點深的，我也玩了很久，差不多可以實現(xiàn)一些復雜的交互，以后有時間在寫），知道原理后就不會太復雜，這篇用到了動態(tài)面板和簡單的獲取日期函數(shù)（右下角為鐘表）。
利用到了函數(shù)：
- 獲取當前系統(tǒng)的小時：[[Now.getUTCHours()]];（這個函數(shù)用的時候發(fā)現(xiàn)總是比系統(tǒng)時間多4個小時，不知道是什么原因，需要減去才行，你們可以嘗試一下
- 獲取當前系統(tǒng)的分鐘：[[Now.getUTCMinutes()]]
- 獲取當前系統(tǒng)的秒數(shù)：[[Now.getUTCSecond()]]
一、基本元件
- 圓形*2（其實一個就夠了，兩個為了好看一點點）
- 動態(tài)面板*3（3個狀態(tài)命名為：秒針、分針、時針）
- 線段*3（分別代表時針、分針、秒針）
- 齒輪*1（可有可無）
二、思路
獲取當前系統(tǒng)的時間，利用動態(tài)面板來回交互，可以實時刷新獲取的時間，進而進指針可以不停的旋轉。需要注意的點：每個動態(tài)面板里的組件必須重合，不然將會出現(xiàn)表針不重合。
三、詳細添加交互
將時針、分針、秒針分別放到三個動態(tài)面板中，然后先添加秒針的動作，載入時-設置動態(tài)面板（下一項，循環(huán)，1000ms），在設置：狀態(tài)改變時-旋轉（線段-[[Now.getUTCSecond()*6]]-錨點：中間位置），為什么乘以6，因為圓360除以60的鐘表格，每格是6度。
分針：和秒針一樣，函數(shù)換成[[Now.getUTCMinutes()*6]]，為什么分針也乘6？和秒針一樣，分針一格代表6度，獲取當前系統(tǒng)的時間 分*6就是旋轉的角度。
時針：[[(((Now.getUTCHours()-4)*30)+((Now.getUTCMinutes()/60)*5)).toFixed(0)]]，時針思路和秒針、分針一樣，只是要加上當前分針的值，函數(shù)中減4是前面說的會比當前時多四。
這里減去，時針走一下是30度，加上分的值：（當前的分除以60）乘以5；后面的函數(shù)：.toFixed(0)，因為加上分的值可能為小時，我們這里要取整。
這里就結束了，預覽可以看看有沒有實現(xiàn)；可以加點細節(jié)，如表盤、顏色區(qū)分美化一下，中間我的小齒輪就是自己加的，感覺多了點機械感。
本文由 @鑫小包 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載
題圖來自?Unsplash，基于 CC0 協(xié)議
這網(wǎng)站現(xiàn)在是沒什么好文章可寫了是吧，這種文章也搬上來……
還好吧，制作時鐘有很多種函數(shù)，我也嘗試了很多方法，利用每秒旋轉多少角度應該是最簡單的，有更簡單的可以發(fā)給我鏈接，讓我學習學習
很酷！