Axure教程-能獲取本地時間的鐘表
效果圖
使用工具
:small_blue_diamond:Axure RP 9 beta 繪製原型
:small_blue_diamond:Camtasia 2018 錄屏及匯出gif
實現邏輯
:small_blue_diamond:[[Now.getHours()]]函式：獲取當前小時數
:small_blue_diamond:[[Now.getMinutes()]]函式：獲取當前分鐘數
:small_blue_diamond:[[Now.getSeconds()]]函式：獲取當前秒數
:small_blue_diamond:獲取到本地時間後，指標是有初始角度的：
設當前時間為X：Y：Z (即X點Y分Z秒)
時針角度：(X×30+Y×0.5)deg
分針角度：Y×6 deg
秒針角度：Z×6 deg
:small_blue_diamond:指標旋轉角度：秒針走60秒 (360deg)，分針走6deg，時針旋轉0.5deg
實現步驟
step one——素材
:small_blue_diamond:尋找鐘錶錶盤的素材
:small_blue_diamond:畫出時分秒的指標，注意指標長度，使三個指標的中心點重合
:small_blue_diamond:此處需要如下元件，其中時分秒的text用於控制指標的旋轉，元件如下圖：
:small_blue_diamond:下圖為素材展示：
step two——互動
:small_blue_diamond: 在 頁面 增加互動事件
當頁面載入時
設定文字
text 時 到 [[Now.getHours()]]
text 分 到 [[Now.getMinutes()]]
text 秒 到 [[Now.getSeconds()]]
設定旋轉
時針 to [[Now.getHours()*30+Now.get
Minutes()/2]]
分針 to [[Now.getMinutes()*6]]
秒針 to [[Now.getSeconds()*6]]
ps. 此時，當頁面載入時，我們讓指標旋轉到了當前時間的角度
:small_blue_diamond: 在 text 秒 增加互動事件
文字改變時
if 元件文字 text 秒=“59”
等待 1000ms
旋轉 秒針 順時針 by 6°
旋轉 分針 順時針 by 6°
旋轉 時針 順時針 by 0.5°
設定文字 text 秒 到 “0”
設定文字 text 分 到 “[[LVAR1+1]]”
（注意：在設定 text 分 的文字時，需要設定區域性變數，LVAR1 = 元件文字 text 分）
if else
等待 1000ms
旋轉 秒針 順時針 by 6°
設定文字 text 秒 到 “[[LVAR1+1]]”
（注意：在設定 text 秒 的文字時，需要設定區域性變數，LVAR1 = 元件文字 text 秒）
:small_blue_diamond:在 text 分 增加互動事件
文字改變時
if 元件文字 text 分=“59”
等待60000ms
設定文字 text 分 到 “0”
設定文字 text 時 到 “[[LVAR1+1]]”
（注意：在設定 text 時 的文字時，需要設定區域性變數，LVAR1 = 元件文字 text 時）
:small_blue_diamond:在 text 分 增加互動事件
文字改變時
if 元件文字 text 時=“23”
等待 3600000 ms
設定文字 text 時 到 “0”
ps. 到此呢，點選預覽就可以收穫滿滿的成就感啦
附件
原型檔案下載連結：https://pan.baidu.com/s/14Dj5JpDuYIb2-zNHq4sYNw
提取密碼：o8dj
對了，本rp檔案是Axure RP 9 beta版本製作，Axure 8及以下版本無法開啟，大家後續如果需要低版本原型，我會上傳。
Good Bye！！！
作者寄語：關注作者公眾號，一起向夢想出發
我想說：
寫文章的時候圖片大小不能調整，簡書團隊能不能設計下功能，編輯太累了！！O(∩_∩)O哈哈~