Axure教程|使用中繼器制作可以保存記錄的秒表
Axure中繼器是一個難點,但是其所帶來的好處也是很多的。雖然理論上通過各種功能的組合也可以實現中繼器的效果,但是制作過程要麻煩的多。本文將制作一個秒表實例,且通過中繼器來記錄秒表的數據。
秒表是手機中的常用軟件,其基本的功能有開始計時,暫停計時,重置以及保存記錄。本文將通過axure實現上述功能,該實例還是比較簡單的,其中最復雜的部分就是中繼器的使用。
一、最終結果展示
體驗地址:點擊此處。
交互說明:
- 點擊開始秒表即開始計時;
- 點擊暫停的時候秒表計時暫停;
- 點擊記錄后記錄當前的秒表數據;
- 點擊重置恢復初始狀態(tài);
- 上方的當前時間隨時獲取當前時間。
二、制作方式
1. 繪制所需要的元件
本實例中沒有對制作的結果進行美化,力求制作的簡潔性。所以所有的元件都是直接繪制的,大致的繪制結果如下圖所示:
繪制中間的時間面板以及上方的當前時間,此外用小圓圈代表4個按鍵,下方的中繼器則是用來進行數據記錄的,當然此處的中繼器是0行,即不可見。這樣一個簡單的框架便得到了。
2. 全局變量的設計
如上圖所示定義全局變量,其中h以及ha表示分鐘的兩個位數。m以及ma表示秒鐘的兩個位數,s以及sa表示毫秒的兩個位數,l則是中繼器中的行數。
除了行數初始值為1行之外,所有的全局變量初始值全部設置為0。
3. 計時面板的設置
計時面板的狀態(tài)改變速度設置為1毫秒,然后狀態(tài)改變后的操作如上所示進行設置,則可以完成最小一位sa的遞增,同時將秒表的讀書進行設置為[[h]][[ha]]:[[m]][[ma]]:[[s]][[sa]]。
當然如果僅是如此,將會出現除去sa會進行改變之外其它位數不會發(fā)生變化的情況,因此還需要設置其進一位的規(guī)則。
4. 進位面板的設置
進位面板的設置如上圖所示,即通過條件判定的方式讓數據進位。比如:當sa達到9的時候歸于0且s加1,依次類推即可以得到最終結果。
5. 記錄功能
當點擊記錄之后的設置如上所示,首先添加一行,其中c0等于全局變量l而c1為計時器的數據,之后再給全局變量加1即可以實現目的。
6. 暫停功能以及重置
重置功能包括暫停在內,暫停的實現原理很簡單,即將動態(tài)面板的狀態(tài)設置為state1,這樣動態(tài)面板將不會繼續(xù)實現循環(huán),整個程序運行停止。
重置還需要將中繼器中的數據全部清除,此外將所有的全局變量恢復初始值。這樣就可以進行下一次的使用了。
至于當前時間的獲取則是時間函數的直接使用,當前時間等于“當前時間:[[Now.getHours()]]:[[Now.getMinutes()]]:[[Now.getSeconds()]]”。
總結
該實例的難度相對比較低,主要是對中繼器使用的練習以及條件判斷的學習。axure雖然僅僅是原型工具,但是如果靈活使用,可以完成很多的事情,從小游戲的制作到各種效果的實現都可以完成。
#專欄作家#
馬璐,人人都是產品經理專欄作家。關注產品設計以及用戶體驗,力求在技術一定的情況下將產品做到極致,充分發(fā)揮技術的潛能。
本文原創(chuàng)發(fā)布于人人都是產品經理。未經許可,禁止轉載
題圖作者提供
進位面板設置了動態(tài)面板嗎,為什么是方框狀態(tài)時沒找到狀態(tài)改變時的用例添加
這種視頻確實很多,常見的還有小樓一夜聽春雨。不過缺點是耗時挺久的,一個系列估計有幾十節(jié)課
為什么會有00:06:610這種時間 ?
大概,不,肯定是邏輯bug,其實挺容易理解的,就是sa變成了10。
發(fā)現你這個秒表有點問題,在9秒的時候,突然就蹦到十秒多了,中間有一秒貌似丟了
我剛想說,你就說了。
看了下,其實就是應該將進一的條件設置為大于等于10,嗯,這樣就ok了
嗯嗯,這樣啊,那可以多思考啊。