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