本篇文章為大家展示了如何利用原型設(shè)計(jì)工具設(shè)計(jì)一款能獲取本地時(shí)間的時(shí)鐘，希望對(duì)有需要的同學(xué)能有所幫助！

效果圖

使用工具

Axure RP 9 beta 繪制原型

Camtasia 2018 錄屏及導(dǎo)出gif

實(shí)現(xiàn)邏輯

[[Now.getHours()]]函數(shù)：獲取當(dāng)前小時(shí)數(shù)

[[Now.getMinutes()]]函數(shù)：獲取當(dāng)前分鐘數(shù)

[[Now.getSeconds()]]函數(shù)：獲取當(dāng)前秒數(shù)

獲取到本地時(shí)間后，指針是有初始角度的：

設(shè)當(dāng)前時(shí)間為X：Y：Z (即X點(diǎn)Y分Z秒)

時(shí)針角度：(X×30+Y×0.5)deg

分針角度：Y×6 deg

秒針角度：Z×6 deg

指針旋轉(zhuǎn)角度：秒針走60秒 (360deg)，分針走6deg，時(shí)針旋轉(zhuǎn)0.5deg

實(shí)現(xiàn)步驟

Step one：

尋找鐘表表盤(pán)的素材，畫(huà)出時(shí)分秒的指針，注意指針長(zhǎng)度，使三個(gè)指針的中心點(diǎn)重合，此處需要如下元件，其中時(shí)分秒的text用于控制指針的旋轉(zhuǎn)，元件如下圖：

下圖為素材展示：

Step two：

在 頁(yè)面 增加交互事件

當(dāng)頁(yè)面載入時(shí)

設(shè)置文本

text 時(shí) 到[[Now.getHours()]]

text 分 到[[Now.getMinutes()]]

text 秒 到[[Now.getSeconds()]]

設(shè)置旋轉(zhuǎn)

時(shí)針 to[[Now.getHours()*30+Now.getMinutes()/2]]

分針 to[[Now.getMinutes()*6]]

秒針 to[[Now.getSeconds()*6]]

ps. 此時(shí)，當(dāng)頁(yè)面加載時(shí)，我們讓指針旋轉(zhuǎn)到了當(dāng)前時(shí)間的角度

在 text 秒 增加交互事件

文字改變時(shí)

if 元件文字 text 秒=“59”

等待 1000ms

旋轉(zhuǎn) 秒針 順時(shí)針 by 6°

旋轉(zhuǎn) 分針 順時(shí)針 by 6°

旋轉(zhuǎn) 時(shí)針 順時(shí)針 by 0.5°

設(shè)置文本 text 秒 到 “0”

設(shè)置文本 text 分 到 “[[LVAR1+1]]”

（注意：在設(shè)置 text 分 的文本時(shí)，需要設(shè)置局部變量，LVAR1 = 元件文字 text 分）

if else

等待 1000ms

旋轉(zhuǎn) 秒針 順時(shí)針 by 6°

設(shè)置文本 text 秒 到 “[[LVAR1+1]]”

（注意：在設(shè)置 text 秒 的文本時(shí)，需要設(shè)置局部變量，LVAR1 = 元件文字 text 秒）

在 text 分 增加交互事件

文字改變時(shí)

if 元件文字 text 分=“59”

等待60000ms

設(shè)置文本 text 分 到 “0”

設(shè)置文本 text 時(shí) 到 “[[LVAR1+1]]”

（注意：在設(shè)置 text 時(shí) 的文本時(shí)，需要設(shè)置局部變量，LVAR1 = 元件文字 text 時(shí)）

在 text 時(shí) 增加交互事件

文字改變時(shí)

if 元件文字 text 時(shí)=“23”

等待3600000 ms

設(shè)置文本 text 時(shí) 到 “0”

ps. 到此，點(diǎn)擊預(yù)覽就可以收獲滿(mǎn)滿(mǎn)的成就感啦！

下載鏈接

https://pan.baidu.com/s/14Dj5JpDuYIb2-zNHq4sYNw

提取密碼：o8dj

本文由 @王得宇A(yù)IPM 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來(lái)自Unsplash，基于CC0協(xié)議