如何用Axure設計錘子手機的秒表計時器

15 評論 29457 瀏覽 63 收藏 4 分鐘

和模擬數字時鐘同樣的場景,秒表計數器是另外一個類似實現方式,只是我們不是取的系統時間,而是自己從0開始計時,并且要處理秒鐘到分鐘的換算。

這個例子里主要就是實現對變量的控制,以及如何處理事件,相關知識點如下:

  1. 定義全局變量,實現對變量的計算控制
  2. 通過組件的顯示/隱藏事件來實現循環處理
  3. 對事件分支的處理,對數字的秒鐘到分鐘的轉換。

OK,現在開始。

添加形狀

設置背景色為黑色,文字顏色為綠色,并將它轉換成動態面板,模擬計時器的場景

計時器場景

添加全局變量

其中hours、minutes、seconds、msec是用來保存格式化的時間字符串的,而nHours、nMinutes、nSeconds、nMsec則是用來計算時間,并換算的

添加全局變量

添加控制組件

添加幾個形狀,分別用來控制時、分、秒、毫秒,以及用來控制總體顯示的all

添加控制組件

添加事件

添加動態面板的載入事件處理,先隱藏所有的控制組件,這樣會先觸發各個控制組件的隱藏事件,開始顯示處理

動態面板的載入事件

在分、秒、毫秒組件上添加事件支持(這里沒增加對小時的處理了,方法類似),我們以秒鐘組件上的事件為例,其它的請下載源文件后查看。

  1. 在小10秒時,為了格式化時間顯示,在字符串前補了個0
  2. 在等于59秒時,分鐘開始需要加1了,秒鐘重置為0
  3. 等待1000毫秒,即1秒鐘
  4. 隱藏當前組件,這樣會觸屏隱藏事件,轉到隱藏事件處理上

注意:隱藏事件和顯示事件基本相同,除了將隱藏組件改為顯示組件外

秒鐘上的事件處理

看一下all組件上的事件,它只負責用來顯示完整的格式化時間,通過變量如下拼接顯示:

[[minutes]]:[[seconds]]:[[msec]]

all組件上的事件

按下F5鍵,在本地運行一下看看效果。

點擊這里查看在線顯示哦。(里面有源文件可下載)

 

本文由 @Axure原型設計工場 原創發布于人人都是產品經理?,未經許可,禁止轉載。

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 源文件在哪里查看;你那個連接好像掛了

    來自河南 回復
  2. 怎么感覺實現方法這么麻煩呢

    來自北京 回復
  3. 對啊, 這個可以計時, 那么暫停呢,比如點擊后,立即結束

    來自廣東 回復
  4. [[ ]]能講一下為什么需要加這個符號 是轉換為字符串得意思嗎?

    來自福建 回復
    1. 這是Axure關于變量用法的基本規范,變量需要放在兩對中括號中,例如“[[nSeconds+1]]”就是給秒鐘+1,如果不帶兩對中括號,系統為認為這只是個字符串,不會做數學運算。

      來自安徽 回復
    2. msec的用例為什么要設置隱藏時和顯示時?

      來自福建 回復
    3. 在隱藏事件里顯示all,在顯示事件里隱藏all,觸發對應的事件,實現循環效果

      來自安徽 回復
  5. 初學者不知道全局變量在哪里整

    來自吉林 回復
    1. 菜單:項目/全局變量…

      來自安徽 回復
  6. 這怎么停下來呢

    來自北京 回復
  7. 為什么我做出來的是從10:00:09開始計時的。。。

    來自上海 回復
  8. 我以為是做高保證的錘子手機時鐘

    來自浙江 回復
  9. ??

    來自廣東 回復
  10. 跟錘子手機有什么關系?

    來自遼寧 回復
    1. 沒關系,這篇帖子只是描述計時器的實現方式,只是根據類似錘子的計時器效果,和界面無關。 ??

      來自安徽 回復