之前曾發(fā)過一個教程，用來顯示秒表的，《如何用Axure設(shè)計錘子手機的秒表計時器》，當然這個和錘子手機的秒表無任何關(guān)系，唯一有聯(lián)系的就是分、秒級的計算和顯示。

今天，隨著axure8的推出，它的旋轉(zhuǎn)功能，終于讓我們可以真的可以實現(xiàn)錘子的世界時間。

這個例子其實很簡單，可以學習到知識點有下面三個：

1. 只用到了日期相關(guān)函數(shù)
2. axure8的旋轉(zhuǎn)功能
3. 以及通過顯示和隱藏來循環(huán)處理的技巧

只是這次我們做的是高保真的效果，背景圖部分使用了錘子的截圖，重新畫了下小時、分鐘和秒鐘的指針。

先睹為快，單擊這里查看在線演示

一、準備素材

到花瓣上找張錘子手機時鐘的背景圖，使用PS重新簡單制作了小時、分鐘和秒鐘的指針，這三個指針圖片的大小和寬度一樣，因為axure8里的旋轉(zhuǎn)是圍繞部件的中心旋轉(zhuǎn)的，所以這里統(tǒng)一了大小，方便旋轉(zhuǎn)處理。

三個指針要在水平和垂直方向?qū)R，這樣就會圍繞著相同的中心點旋轉(zhuǎn)。

另外在axure里設(shè)置了下三個指針的陰影效果。

二、使用顯示/隱藏事件處理循環(huán)

在顯示事件里等待一秒后再隱藏，隱藏事件里淡入淡出顯示指針，然后開始計算當前時間，旋轉(zhuǎn)指針到正確的位置。

為了先觸發(fā)循環(huán)，在頁面加載時先觸發(fā)部件的隱藏事件，另外將時鐘移到頁面中央。

怎么樣，足夠簡單吧，可以自己試一下哦！

有任何問題歡迎隨時交流。

本文由 @Axure原型設(shè)計工場?原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。