Protopie教程1-2：可互動秒錶

秒錶怎麼用

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

具體實現效果

↑動態互動過程

案例原始檔下載&預覽：

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協議