如何用Axure設計錘子手機的秒表計時器
和模擬數字時鐘同樣的場景,秒表計數器是另外一個類似實現方式,只是我們不是取的系統時間,而是自己從0開始計時,并且要處理秒鐘到分鐘的換算。
這個例子里主要就是實現對變量的控制,以及如何處理事件,相關知識點如下:
- 定義全局變量,實現對變量的計算控制
- 通過組件的顯示/隱藏事件來實現循環處理
- 對事件分支的處理,對數字的秒鐘到分鐘的轉換。
OK,現在開始。
添加形狀
設置背景色為黑色,文字顏色為綠色,并將它轉換成動態面板,模擬計時器的場景
添加全局變量
其中hours、minutes、seconds、msec是用來保存格式化的時間字符串的,而nHours、nMinutes、nSeconds、nMsec則是用來計算時間,并換算的
添加控制組件
添加幾個形狀,分別用來控制時、分、秒、毫秒,以及用來控制總體顯示的all
添加事件
添加動態面板的載入事件處理,先隱藏所有的控制組件,這樣會先觸發各個控制組件的隱藏事件,開始顯示處理
在分、秒、毫秒組件上添加事件支持(這里沒增加對小時的處理了,方法類似),我們以秒鐘組件上的事件為例,其它的請下載源文件后查看。
- 在小10秒時,為了格式化時間顯示,在字符串前補了個0
- 在等于59秒時,分鐘開始需要加1了,秒鐘重置為0
- 等待1000毫秒,即1秒鐘
- 隱藏當前組件,這樣會觸屏隱藏事件,轉到隱藏事件處理上
注意:隱藏事件和顯示事件基本相同,除了將隱藏組件改為顯示組件外
看一下all組件上的事件,它只負責用來顯示完整的格式化時間,通過變量如下拼接顯示:
[[minutes]]:[[seconds]]:[[msec]]
按下F5鍵,在本地運行一下看看效果。
點擊這里查看在線顯示哦。(里面有源文件可下載)
本文由 @Axure原型設計工場 原創發布于人人都是產品經理?,未經許可,禁止轉載。
評論
源文件在哪里查看;你那個連接好像掛了
怎么感覺實現方法這么麻煩呢
對啊, 這個可以計時, 那么暫停呢,比如點擊后,立即結束
[[ ]]能講一下為什么需要加這個符號 是轉換為字符串得意思嗎?
這是Axure關于變量用法的基本規范,變量需要放在兩對中括號中,例如“[[nSeconds+1]]”就是給秒鐘+1,如果不帶兩對中括號,系統為認為這只是個字符串,不會做數學運算。
msec的用例為什么要設置隱藏時和顯示時?
在隱藏事件里顯示all,在顯示事件里隱藏all,觸發對應的事件,實現循環效果
初學者不知道全局變量在哪里整
菜單:項目/全局變量…
這怎么停下來呢
為什么我做出來的是從10:00:09開始計時的。。。
我以為是做高保證的錘子手機時鐘
??
跟錘子手機有什么關系?
沒關系,這篇帖子只是描述計時器的實現方式,只是根據類似錘子的計時器效果,和界面無關。 ??