中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

效果圖

使用工具

Axure RP 9 beta 繪制原型

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

實現(xiàn)邏輯

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

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

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

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

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

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

分針角度：Y×6 deg

秒針角度：Z×6 deg

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

實現(xiàn)步驟

Step one：

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

下圖為素材展示：

Step two：

在 頁面 增加交互事件

當(dāng)頁面載入時

設(shè)置文本

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

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

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

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

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

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

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

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

在 text 秒 增加交互事件

文字改變時

if 元件文字 text 秒=“59”

等待 1000ms

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

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

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

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

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

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

if else

等待 1000ms

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

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

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

在 text 分 增加交互事件

文字改變時

if 元件文字 text 分=“59”

等待60000ms

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

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

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

在 text 時 增加交互事件

文字改變時

if 元件文字 text 時=“23”

等待3600000 ms

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

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

下載鏈接

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

提取密碼：o8dj

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

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