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

這次帶給大家的案例是基于 Axure RP 8.0，利用了 8.0 所特有的新功能——旋轉。隨著對 RP 8.0 的了解，我是越來越喜歡這個版本，尤其是這個新增的的“旋轉”功能，絕對是我做原型時的御用特效師（duang duang duang 的特效就靠它了）。

其實這個案例我已經構思了很長時間，只是因為時間關系，一直都沒有實施，有時候畫原型、寫教程也是需要一點感覺的，感覺來了，事半功倍，沒有感覺，只會浪費時間（這么說貌似有點矯情）。

（原型效果圖）

原型預覽

預覽地址：http://raedme.cn/axurelab/009_clock/index.html

制作過程

制作 Clock 時鐘原型，需要解決的核心問題有以下三個：

1. ?繪制時鐘部件，包括時針、分針、秒針、表盤等，當然也可使用 PS 直接制作所需圖片，或上網尋找相關素材（本案例中的表盤為網上下載，表針均用 Axure 繪制）
2. 實現表針的旋轉和邏輯，這里是兩層概念，一層是要實現表針的旋轉動作，二層是要處理好秒、分、時的遞進邏輯關系，也就是秒針旋轉一周，分針要對應的走一分，分針走一圈，相應的時針要走一個點。
3. 當原型預覽時，可以動態顯示當前系統時間。

明確了以上問題后，接下來就可以動手畫原型了。

Ⅰ.繪制時鐘部件

表盤可以自行繪制，也可從網上下載相應圖片（上圖中的表盤為網上下載）。

繪制表針的時候需要注意一點，就是要考慮到對表針進行旋轉的時候需要有一個軸心，在上圖中可以看到我的表針下端都有一些空白區域，這個是為了保證整個表針部件的中心位置正好是表針旋轉的軸心，而后面的旋轉動作也是加在表針部件的中心位置。

另外一個就是可以通過形狀的運算及組合來形成一個表針部件，但是在時間過程中發現，旋轉組合后的部件，在瀏覽器預覽效果的時候容易導致部件錯位，因此建議將表針轉化為 PNG 圖片，這樣可以保證原型預覽時旋轉效果的完美。

第三個需要注意的點就是，將表盤、時針、分針、秒針組合在一起的時候，需要絕對的中心重合，這個時候需要考慮到各個部件的尺寸問題，居中排列是可以保證兩邊的距離都是 1 個完整的像素（如果出現 0.5 個像素可能會有問題）。

那么基于以上幾點，在加上你的耐心細致，相信很快就可以搞定一套時鐘部件。那么接下來就進入我們第二個過程。

Ⅱ. 時鐘走時邏輯

這個過程就是要讓時鐘動起來，并且可以正確的走時。動起來自然是給時針加上相關動作，但是正確的走時就需要一個完整而又合理的邏輯。

① 添加 3 個輔助部件——文本框，分別命名為“時”、“分”、“秒”，并分別用來顯示時、分、秒，由于文本框有一個特殊的事件——文本改變時，所以可以利用這個事件實現計時以及循環觸發所需事件。

② 在“秒”文本框上增加如下事件：

【解釋】

Case 1：當文本框“秒”的值等于 59 時，等待 1 秒，設置 time（time 為第 4 個文本框的名稱）?的值為當前時間，順時針旋轉秒針 6°（因為一圈 60 秒 360°，所以每秒 6°），設置文本框“秒”的值等于 0（因為 59 的下一秒是 0），設置文本框“分”的值 +1（因為秒針走到 59 后，再過 1 秒，分針要 +1），順時針旋轉分針 6°（因為分針走 1 分旋轉的角度是 6°），順時針旋轉時針到“當前時*30°+當前分/2°”的位置（這個請仔細體會一下）。

Case 2：其他情況，等待 1 秒，設置 time 的值為當前時間，順時針旋轉秒針 6°，設置文本框“秒”的值 +1。

③ 在“分”文本框上增加如下事件：

【解釋】

Case 1：當文本框“分”的值等于 59 時，等待 60 秒，設置文本框“分”的值為 0，設置文本框“時”的值 +1。

④ 在文本框“時”上增加如下事件：

【解釋】

Case 1：當文本框“時”的值等于 23 時，等待 3600 秒，設置文本框“時”的值為 0。

到這里就完成了時鐘走時的邏輯，那接下來就是解決如何在原型預覽時（也就是頁面加載時）獲取當前系統時間。

Ⅲ.獲取當前系統時間

由于上一步中時針走時用到了 3 個輔助文本框，分別表示時、分、秒，那在這一步，獲取當前系統時間的時候，我也采用單獨獲取的方式，也就是單獨獲取當前的時、分、秒，然后賦值給文本框“時”、“分”、“秒”。

【解釋】

Case 1：第一個 Set 是把獲取的當前系統時間的時、分、秒分別復制為文本框 “時”、“分”、“秒”；第二個 Rotate 是根據當前獲取的時分秒，來分別將時針、分針、秒針旋轉到指定的位置。

當時鐘讀取并顯示了當前系統時間后，就會按照之前設置好的走時邏輯繼續走時，并可以和當前系統時間保持同步（不同瀏覽器會出現不同步的情況，本人測試 Edge 和 IE11 瀏覽器兼容效果最好）。

Ⅳ.總結

OK，到這里整個案例就講完了，而且文中也講述了所有的事件、動作、邏輯，接下來感興趣的小伙伴就需要自己去動手實踐了。當然如果有更好的方式方法也歡迎與我交流（微信：urmagic）。

原型下載：

http://pan.baidu.com/s/1nuWP2Zn ??密碼: dtbf

本文由 @RAEDME大鵬 原創發布于人人都是產品經理。未經許可，禁止轉載。