秒表——常用的測時工具，從零開始進行計時。本案例中具體實現的秒表，用戶點開始後即開始計時，在秒表運行的時候可以進行多次計次，停止後可一鍵複位。與上一篇時鐘案例相比，本案例除了時間變量外還增加計次變量，統計計次數量；并通過對同一觸發增加條件判斷，使得對同一對象的單一觸發獲得不同的操作反饋。

具體實現效果

↑動态交互過程

案例源文件下載&預覽：https://cloud.protopie.io/p/6d959af9bb

（需要下載源文件，源文件中有三個不同場景，對應“時鐘”、“秒表”、“計時器”）

本篇教程涉及的protopie功能

觸發：監聽、單擊

反應：賦值、文本、停止、顔色、透明度、大小、滾頁

變量：數字變量及其計算表達

制作思路

時間計算及數字表達

對于基礎時間的計算方式與時鐘教程中的計算方式類似，差異在于，秒表的時間精度更小為百分之一秒，且僅顯示到分鐘數。微秒（百分之一秒）每0.01秒 1，每1秒歸零一次；秒每秒 1，每60秒歸零一次；分每60秒 1。數字表達同樣需要在個位數字前面添加一個“0”，以保證數秒表以00:00.00六位的形式顯示。

計時的啟動、暫停、繼續及複位

秒表與時鐘的差異在于時鐘在自動加載時就開始循環計時，但秒表需要在用戶做點擊操作時進行，同時需要支持暫停和繼續的操作，暫停的操作可以利用protopie中的“停止”暫停時間計算。

繼續操作時需要注意微秒、秒和分的計算都是在停止時的計數基礎上進行計數的，所以對于“ 1”和歸零的操作需要基于停止數來做延遲開始的設置。舉例來說，當要從02:44.07的時間點重新開始時間計算時，微秒歸零和秒鐘 1的時間需要等待（1-0.07）秒的時間；而秒鐘歸零和分鐘 1的時間需要等待（60-44.07）秒的時間。

複位的操作是需要增加一個将微秒、秒、分鐘的值手動恢複至0的設置。

對同一對象的單一觸發實現不同操作

秒表的頁面中間為操作區域，放置兩個按鈕，秒表未啟動時左右按鈕分别為“計次”和“啟動”，其中“計次”按鈕不可用；當開始計時後“計次”按鈕可用，同時“啟動”按鈕變為“停止”；當用戶點擊“停止”按鈕，左側“計次”按鈕變為“複位”，“停止”也重新變為“啟動”；用戶點擊“複位”，回到最初未啟動的按鈕狀态。

當然可以使用四個不同圖層進行透明度設置來實現效果。同樣也可以僅使用兩個文本圖層添加對文本内容的判斷進行區分。

秒表計次功能及相鄰兩次計次時間差值計算

秒表中涉及到的計次功能，需要記錄當前具體計次的次數，本次計次的時間，以及本次與上次計次的時間差。所以需要新增加三個變量，分别記錄計次數、上次計次時間以及兩次計次時間差的值。

每次用戶點擊“計次”按鈕後，先将當前時間減去上次計次時間獲得兩次時間差後，将上次計次時間更新為當前時間，再在計次數上 1（不可改變順序）。

計次信息的文本顯示及查看

由于可以多次計次，每次記錄都需要做換行顯示，這裡涉及一個文本換行 n 用法。

同時多次計時會出現次數顯示超出單屏的顯示，這時在計次的同時，需要随着計次的增加不斷增加文本的顯示區域，并利用滾頁容器層和滾頁反應使其最後一條可以顯示出來。

具體實現步驟

step1

新建Protopie文件，實現基本視效。

除切換tab之外，界面中操作按鈕、秒表數字表達、計次記錄顯示均使用文本圖層。

• 操作按鈕默認文本使用“啟動”和“計次”，其中計次按鈕不可用所以透明度使用26%。
• 秒表的時間數字使用分開的三個文本圖層，默認顯示為00:00.00。（與時鐘案例類似）
• 建立計次标題、具體計次時間和時間變化值的三個空文本圖層，圖層高度設為單行文本可以顯示的高度，并一起放入計次記錄的滾頁容器層中，使滾頁容器支持豎向滾動。

Step2

建立操作按鈕之間的關系

根據前面梳理的按鈕邏輯對“啟動”文本圖層添加“點擊”觸發：

當“啟動”的文本為“啟動”時，将“啟動”文本變為“停止”；将“啟動”圖層的顔色調整為紅色；将“計次”圖層透明度變為100%，代表可用狀态；同時考慮到暫停後再次啟動的情況，将“計次”文本設為“計次”。

當“啟動”的文本為“停止”時，将“計次”文本變為“複位”；将“停止”文本變為“啟動”；将“啟動”圖層的顔色重新設為為綠色。

對“計次”文本圖層同樣添加“點擊”觸發：

• 當“計次”文本内容為“計次”，同時透明度為100時，計次按鈕操作有效，具體反應設置之後再添加。
• 當“計次”文本内容為“複位”時，将“計次”文本重新設為“計次”，并将其透明度設為30%。

Step3

建立六個變量分别命名為ss、s、m、count、lasttime、addedtime，分别對應微秒數、秒數、分鐘數、計次次數、上次計次時間、最近兩次計次的時間差。（僅适用于當前場景的變量即可）所有變量均為數字變量，除了計次次數默認值為1之外，其他所有變量的初始默認值均為0。

Step4

在對“啟動“文本的點擊觸發下，添加對變量ss、s、m的賦值和停止操作

當“啟動”的文本為“啟動”時，對變量ss、s、m進行賦值設置：

變量ss代表微秒數，對其賦值2次，一次使其每0.01秒增加1；一次使其每1秒做一次歸零賦值，同時＋1的設置需要延遲0.01秒開始，而考慮其支持停止和啟動的操作，所以歸零增加操作延遲，具體表達式：1-(ss/100)

變量s代表秒數，同樣對其賦值2次，一次使其每1秒增加1；每60秒做一次歸零賦值。同樣由于停止和啟動的用戶可操作性，每秒增加1的延遲開始需要與微秒數歸零延遲的時間一緻，使用表達式：1-(ss/100) ；而歸零賦值的延遲開始使用表達式：60-s-(ss/100)。

變量m代表分鐘數，使其每60秒增加1，延遲開始時間使用表達式：60-s-(ss/100) ，與秒數歸零延遲的時間一緻。

當“啟動”的文本為“停止”時，對變量ss、s、m添加停止設置，使得點擊停止文本時對變量ss、s、m的賦值計算停止保持不變。

整體對“啟動“文本的點擊觸發，即對界面中右側按鈕對設置，如下圖所示：

Step5

添加觸發“監聽”，監聽不斷變化的變量ss，将秒表數字顯示的文本與變量ss、s、m的關系建立起來。對于微秒數、秒數及分鐘數增加條件判斷，當數值小于10時使用表達式 “0” ss 、 “0” s 和 “0” m ；當數值大于等于10時直接使用變量ss、s、m的值。

Step6

在對“計次“文本的點擊觸發下，添加對變量count、lasttime、addedtime的賦值。考慮到首次的計時的lasttime與addedtime值一緻，同時在顯示計時記錄顯示時首行不涉及換行操作，這裡将 count=1 與 count>1 的場景作區分。

當“計次“文本為“計次“透明度為100%，同時 count=1 時：

• 對先對變量lasttime賦值m*60 s ss/100 記錄下第一次計次時秒表走過的時間；
• 再對變量count做 1的賦值。

當“計次“文本為“計次“透明度為100%，但 count>1 時：

• 先利用變量lasttime和當前變量ss、s、m的值進行計算，得到其與之前一次計次的時間差賦值給變量addedtime，表達式為：(m*60 s ss/100)-lasttime；
• 再對變量lasttime賦值m*60 s ss/100 ；
• 最後對變量count做 1的設置。（這裡的賦值設置需要注意先後關系）

Step7

将計次記錄中計次标題、具體時間、變化值的文本與變量count、lasttime、addedtime的關系建立起來。同時考慮文本顯示，将文本的高度與變量count也建立關聯，使其每次高度都可以增加一行顯示。

當“計次“文本為“計次“透明度為100%，同時 count=1 時：

• 對“計次标題“添加文本設置，文本内容使用表達式 “計次” count。
• 對“具體時間“同樣添加文本設置，内容為表達式 `分`.text ”:” `秒`.text ”.” `百分之一秒`.text ，即顯示當前秒表數字顯示對文本内容。
• 對“變化值“添加文本設置，内容為表達式 “ ” format(lasttime, “#.00”) ，這裡由于是首次計次，所以計次時間變化量就為當前變量lasttime的值，在數字前增加一個“ “表示時間增量。這裡還涉及一個在Protopie中将數字轉換為文本格式時，可以指定數字顯示格式的表達式。format(lasttime, “#.00”) 表示将lasttime作為文本顯示，同時數值上需要保留至小數點後兩位。

當“計次“文本為“計次“透明度為100%，同時 count>1 時，在變量count 1賦值之前增加設置：

• 先對“計次标題“、“具體時間“、“變化值“三個文本對高度進行調整，使其高度等于count*32 ，32表示每行文本的顯示高度（文字大小為16，行距為2）。
• 對“計次标題“添加文本設置，文本内容使用表達式 `計次标題`.text ”n” ”計次” count。表示在原有的“計次标題“文本内容的基礎上，換行後顯示本次的計次數。
• 同理将“具體時間“對文本内容設置為 `具體時間`.text ”n” `分`.text ”:” `秒`.text ”.” `百分之一秒`.text；将“變化值“對文本内容設置為 `變化值`.text ”n” ” ” format(addedtime, “#.00”)

Step8

當計次顯示操作一屏時，按照本案例的設定，單屏隻能顯示8條計次記錄，當第9次記錄出現時，即 count>8 時，增加滾頁設置，使其自動向下滾動一行。使用表達式：(count-9)*32 這裡表達式中需要将變量count-9是由于，整個條件 count>8 是放置在count 1賦值之後的，所以當執行滾頁操作時，當前的變量count已經增加1了。

整體的當界面左側按鈕顯示計次文本時的單擊觸發設置，如下圖所示：

Step9

對當左側按鈕文本值為“複位”時，對所有的變量、文本值、文本高度、滾頁做恢複到初始值的設置：

• 對變量ss、s、m、count的值重新設置到初始值。由于變量lasttime和addedtime是通過其他變量計算得到的所以不用做特别設置；
• 将“計次标題”、“具體時間”、“變化值”三個文本的内容都設置為 ““ ，表示空文本無内容；
• 将“計次記錄“的滾頁容器層重新滾頁值初始的0的位置。

大功告成！！！可以直接在預覽窗中查看效果~~

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

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部