秒表——常用的測時工具，從零開始進(jìn)行計(jì)時。本案例中具體實(shí)現(xiàn)的秒表，用戶點(diǎn)開始后即開始計(jì)時，在秒表運(yùn)行的時候可以進(jìn)行多次計(jì)次，停止后可一鍵復(fù)位。與上一篇時鐘案例相比，本案例除了時間變量外還增加計(jì)次變量，統(tǒng)計(jì)計(jì)次數(shù)量；并通過對同一觸發(fā)增加條件判斷，使得對同一對象的單一觸發(fā)獲得不同的操作反饋。

具體實(shí)現(xiàn)效果

↑動態(tài)交互過程

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

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

本篇教程涉及的protopie功能

觸發(fā)：監(jiān)聽、單擊

反應(yīng)：賦值、文本、停止、顏色、透明度、大小、滾頁

變量：數(shù)字變量及其計(jì)算表達(dá)

制作思路

時間計(jì)算及數(shù)字表達(dá)

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

計(jì)時的啟動、暫停、繼續(xù)及復(fù)位

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

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

復(fù)位的操作是需要增加一個將微秒、秒、分鐘的值手動恢復(fù)至0的設(shè)置。

對同一對象的單一觸發(fā)實(shí)現(xiàn)不同操作

秒表的頁面中間為操作區(qū)域，放置兩個按鈕，秒表未啟動時左右按鈕分別為“計(jì)次”和“啟動”，其中“計(jì)次”按鈕不可用；當(dāng)開始計(jì)時后“計(jì)次”按鈕可用，同時“啟動”按鈕變?yōu)椤巴Ｖ埂?；?dāng)用戶點(diǎn)擊“停止”按鈕，左側(cè)“計(jì)次”按鈕變?yōu)椤皬?fù)位”，“停止”也重新變?yōu)椤皢印?；用戶點(diǎn)擊“復(fù)位”，回到最初未啟動的按鈕狀態(tài)。

當(dāng)然可以使用四個不同圖層進(jìn)行透明度設(shè)置來實(shí)現(xiàn)效果。同樣也可以僅使用兩個文本圖層添加對文本內(nèi)容的判斷進(jìn)行區(qū)分。

秒表計(jì)次功能及相鄰兩次計(jì)次時間差值計(jì)算

秒表中涉及到的計(jì)次功能，需要記錄當(dāng)前具體計(jì)次的次數(shù)，本次計(jì)次的時間，以及本次與上次計(jì)次的時間差。所以需要新增加三個變量，分別記錄計(jì)次數(shù)、上次計(jì)次時間以及兩次計(jì)次時間差的值。

每次用戶點(diǎn)擊“計(jì)次”按鈕后，先將當(dāng)前時間減去上次計(jì)次時間獲得兩次時間差后，將上次計(jì)次時間更新為當(dāng)前時間，再在計(jì)次數(shù)上+1（不可改變順序）。

計(jì)次信息的文本顯示及查看

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

同時多次計(jì)時會出現(xiàn)次數(shù)顯示超出單屏的顯示，這時在計(jì)次的同時，需要隨著計(jì)次的增加不斷增加文本的顯示區(qū)域，并利用滾頁容器層和滾頁反應(yīng)使其最后一條可以顯示出來。

具體實(shí)現(xiàn)步驟

step1

新建Protopie文件，實(shí)現(xiàn)基本視效。

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

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

Step2

建立操作按鈕之間的關(guān)系

根據(jù)前面梳理的按鈕邏輯對“啟動”文本圖層添加“點(diǎn)擊”觸發(fā)：

當(dāng)“啟動”的文本為“啟動”時，將“啟動”文本變?yōu)椤巴Ｖ埂?；將“啟動”圖層的顏色調(diào)整為紅色；將“計(jì)次”圖層透明度變?yōu)?00%，代表可用狀態(tài)；同時考慮到暫停后再次啟動的情況，將“計(jì)次”文本設(shè)為“計(jì)次”。

當(dāng)“啟動”的文本為“停止”時，將“計(jì)次”文本變?yōu)椤皬?fù)位”；將“停止”文本變?yōu)椤皢印?；將“啟動”圖層的顏色重新設(shè)為為綠色。

對“計(jì)次”文本圖層同樣添加“點(diǎn)擊”觸發(fā)：

• 當(dāng)“計(jì)次”文本內(nèi)容為“計(jì)次”，同時透明度為100時，計(jì)次按鈕操作有效，具體反應(yīng)設(shè)置之后再添加。
• 當(dāng)“計(jì)次”文本內(nèi)容為“復(fù)位”時，將“計(jì)次”文本重新設(shè)為“計(jì)次”，并將其透明度設(shè)為30%。

Step3

建立六個變量分別命名為ss、s、m、count、lasttime、addedtime，分別對應(yīng)微秒數(shù)、秒數(shù)、分鐘數(shù)、計(jì)次次數(shù)、上次計(jì)次時間、最近兩次計(jì)次的時間差。（僅適用于當(dāng)前場景的變量即可）所有變量均為數(shù)字變量，除了計(jì)次次數(shù)默認(rèn)值為1之外，其他所有變量的初始默認(rèn)值均為0。

Step4

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

當(dāng)“啟動”的文本為“啟動”時，對變量ss、s、m進(jìn)行賦值設(shè)置：

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

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

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

當(dāng)“啟動”的文本為“停止”時，對變量ss、s、m添加停止設(shè)置，使得點(diǎn)擊停止文本時對變量ss、s、m的賦值計(jì)算停止保持不變。

整體對“啟動“文本的點(diǎn)擊觸發(fā)，即對界面中右側(cè)按鈕對設(shè)置，如下圖所示：

Step5

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

Step6

在對“計(jì)次“文本的點(diǎn)擊觸發(fā)下，添加對變量count、lasttime、addedtime的賦值。考慮到首次的計(jì)時的lasttime與addedtime值一致，同時在顯示計(jì)時記錄顯示時首行不涉及換行操作，這里將 count=1 與 count>1 的場景作區(qū)分。

當(dāng)“計(jì)次“文本為“計(jì)次“透明度為100%，同時 count=1 時：

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

當(dāng)“計(jì)次“文本為“計(jì)次“透明度為100%，但 count>1 時：

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

Step7

將計(jì)次記錄中計(jì)次標(biāo)題、具體時間、變化值的文本與變量count、lasttime、addedtime的關(guān)系建立起來。同時考慮文本顯示，將文本的高度與變量count也建立關(guān)聯(lián)，使其每次高度都可以增加一行顯示。

當(dāng)“計(jì)次“文本為“計(jì)次“透明度為100%，同時 count=1 時：

• 對“計(jì)次標(biāo)題“添加文本設(shè)置，文本內(nèi)容使用表達(dá)式 “計(jì)次”+count。
• 對“具體時間“同樣添加文本設(shè)置，內(nèi)容為表達(dá)式 `分`.text+”:”+`秒`.text+”.”+`百分之一秒`.text ，即顯示當(dāng)前秒表數(shù)字顯示對文本內(nèi)容。
• 對“變化值“添加文本設(shè)置，內(nèi)容為表達(dá)式 “+”+format(lasttime, “#.00”) ，這里由于是首次計(jì)次，所以計(jì)次時間變化量就為當(dāng)前變量lasttime的值，在數(shù)字前增加一個“+“表示時間增量。這里還涉及一個在Protopie中將數(shù)字轉(zhuǎn)換為文本格式時，可以指定數(shù)字顯示格式的表達(dá)式。format(lasttime, “#.00”) 表示將lasttime作為文本顯示，同時數(shù)值上需要保留至小數(shù)點(diǎn)后兩位。

當(dāng)“計(jì)次“文本為“計(jì)次“透明度為100%，同時 count>1 時，在變量count+1賦值之前增加設(shè)置：

• 先對“計(jì)次標(biāo)題“、“具體時間“、“變化值“三個文本對高度進(jìn)行調(diào)整，使其高度等于count*32 ，32表示每行文本的顯示高度（文字大小為16，行距為2）。
• 對“計(jì)次標(biāo)題“添加文本設(shè)置，文本內(nèi)容使用表達(dá)式 `計(jì)次標(biāo)題`.text+”n”+”計(jì)次”+count。表示在原有的“計(jì)次標(biāo)題“文本內(nèi)容的基礎(chǔ)上，換行后顯示本次的計(jì)次數(shù)。
• 同理將“具體時間“對文本內(nèi)容設(shè)置為 `具體時間`.text+”n”+`分`.text+”:”+`秒`.text+”.”+`百分之一秒`.text；將“變化值“對文本內(nèi)容設(shè)置為 `變化值`.text+”n”+”+”+format(addedtime, “#.00”)

Step8

當(dāng)計(jì)次顯示操作一屏?xí)r，按照本案例的設(shè)定，單屏只能顯示8條計(jì)次記錄，當(dāng)?shù)?次記錄出現(xiàn)時，即 count>8 時，增加滾頁設(shè)置，使其自動向下滾動一行。使用表達(dá)式：(count-9)*32 這里表達(dá)式中需要將變量count-9是由于，整個條件 count>8 是放置在count+1賦值之后的，所以當(dāng)執(zhí)行滾頁操作時，當(dāng)前的變量count已經(jīng)增加1了。

整體的當(dāng)界面左側(cè)按鈕顯示計(jì)次文本時的單擊觸發(fā)設(shè)置，如下圖所示：

Step9

對當(dāng)左側(cè)按鈕文本值為“復(fù)位”時，對所有的變量、文本值、文本高度、滾頁做恢復(fù)到初始值的設(shè)置：

• 對變量ss、s、m、count的值重新設(shè)置到初始值。由于變量lasttime和addedtime是通過其他變量計(jì)算得到的所以不用做特別設(shè)置；
• 將“計(jì)次標(biāo)題”、“具體時間”、“變化值”三個文本的內(nèi)容都設(shè)置為 ““ ，表示空文本無內(nèi)容；
• 將“計(jì)次記錄“的滾頁容器層重新滾頁值初始的0的位置。

大功告成?。?！可以直接在預(yù)覽窗中查看效果~~

本文由 @Annie 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議