導(dǎo)讀

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

本篇教程涉及的protopie功能

○? 觸發(fā)：監(jiān)聽(tīng)、單擊

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

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

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

秒表具體效果截圖

具體實(shí)現(xiàn)的動(dòng)態(tài)效果

制作思路

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

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

2.計(jì)時(shí)的啟動(dòng)、暫停、繼續(xù)及復(fù)位

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

“停止”的具體說(shuō)明

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

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

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

秒表的頁(yè)面中間為操作區(qū)域，放置兩個(gè)按鈕，秒表未啟動(dòng)時(shí)左右按鈕分別為“計(jì)次”和“啟動(dòng)”，其中“計(jì)次”按鈕不可用；當(dāng)開(kāi)始計(jì)時(shí)后“計(jì)次”按鈕可用，同時(shí)“啟動(dòng)”按鈕變?yōu)椤巴Ｖ埂?；?dāng)用戶(hù)點(diǎn)擊“停止”按鈕，左側(cè)“計(jì)次”按鈕變?yōu)椤皬?fù)位”，“停止”也重新變?yōu)椤皢?dòng)”；用戶(hù)點(diǎn)擊“復(fù)位”，回到最初未啟動(dòng)的按鈕狀態(tài)。當(dāng)然可以使用四個(gè)不同圖層進(jìn)行透明度設(shè)置來(lái)實(shí)現(xiàn)效果。同樣也可以?xún)H使用兩個(gè)文本圖層添加對(duì)文本內(nèi)容的判斷進(jìn)行區(qū)分。

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

秒表中涉及到的計(jì)次功能，需要記錄當(dāng)前具體計(jì)次的次數(shù)，本次計(jì)次的時(shí)間，以及本次與上次計(jì)次的時(shí)間差。所以需要新增加三個(gè)變量，分別記錄計(jì)次數(shù)、上次計(jì)次時(shí)間以及兩次計(jì)次時(shí)間差的值。每次用戶(hù)點(diǎn)擊“計(jì)次”按鈕后，先將當(dāng)前時(shí)間減去上次計(jì)次時(shí)間獲得兩次時(shí)間差后，將上次計(jì)次時(shí)間更新為當(dāng)前時(shí)間，再在計(jì)次數(shù)上+1（不可改變順序）。

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

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

文本換行?\n 的使用案例

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

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

step1

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

導(dǎo)入素材后界面顯示及圖層關(guān)系

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

○? 操作按鈕默認(rèn)文本使用“啟動(dòng)”和“計(jì)次”，其中計(jì)次按鈕不可用所以透明度使用26%。

○? 秒表的時(shí)間數(shù)字使用分開(kāi)的三個(gè)文本圖層，默認(rèn)顯示為00:00.00。（與時(shí)鐘案例類(lèi)似）

○? 建立計(jì)次標(biāo)題、具體計(jì)次時(shí)間和時(shí)間變化值的三個(gè)空文本圖層，圖層高度設(shè)為單行文本可以顯示的高度，并一起放入計(jì)次記錄的滾頁(yè)容器層中，使?jié)L頁(yè)容器支持豎向滾動(dòng)。

Step2

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

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

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

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

對(duì)“啟動(dòng)”文本圖層的“點(diǎn)擊”觸發(fā)

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

○? 當(dāng)“計(jì)次”文本內(nèi)容為“計(jì)次”，同時(shí)透明度為100時(shí)，計(jì)次按鈕操作有效，具體反應(yīng)設(shè)置之后再添加。

○? 當(dāng)“計(jì)次”文本內(nèi)容為“復(fù)位”時(shí)，將“計(jì)次”文本重新設(shè)為“計(jì)次”，并將其透明度設(shè)為30%。

對(duì)“計(jì)次”文本圖層的“點(diǎn)擊”觸發(fā)

Step3

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

變量面板中建立ss、s、m、count、lasttime、addedtime共6個(gè)變量

Step4

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

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

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

對(duì)于變量ss的兩次賦值設(shè)置

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

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

對(duì)于變量s、m的賦值設(shè)置

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

對(duì)于變量ss、s、m的停止設(shè)置

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

整體對(duì)“啟動(dòng)“文本的點(diǎn)擊觸發(fā)設(shè)置

Step5

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

當(dāng)變量ss＜10時(shí)，微秒數(shù)的文本表達(dá)式設(shè)置 “0”+ss

Step6

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

“計(jì)次“文本的點(diǎn)擊觸發(fā)下，對(duì)變量count、lasttime、addedtime的賦值設(shè)置

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

○? 對(duì)先對(duì)變量lasttime賦值?m*60+s+ss/100 記錄下第一次計(jì)次時(shí)秒表走過(guò)的時(shí)間；

○? 再對(duì)變量count做?count+1?的賦值。

當(dāng)“計(jì)次“文本為“計(jì)次“透明度為100%，同時(shí) count=1 時(shí)的兩次賦值

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

○? 先利用變量lasttime和當(dāng)前變量ss、s、m的值進(jìn)行計(jì)算，得到其與之前一次計(jì)次的時(shí)間差賦值給變量addedtime，表達(dá)式為：(m*60+s+ss/100)-lasttime；

○? 再對(duì)變量lasttime賦值?m*60+s+ss/100 ；

○? 最后對(duì)變量count做?count+1?的設(shè)置。（這里的賦值設(shè)置需要注意先后關(guān)系）

當(dāng)“計(jì)次“文本為“計(jì)次“透明度為100%，但?count>1?時(shí)的三次賦值

Step7

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

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

○? 對(duì)“計(jì)次標(biāo)題“添加文本設(shè)置，文本內(nèi)容使用表達(dá)式 "計(jì)次"+count?。

○? 對(duì)“具體時(shí)間“同樣添加文本設(shè)置，內(nèi)容為表達(dá)式 `分`.text+":"+`秒`.text+"."+`百分之一秒`.text?，即顯示當(dāng)前秒表數(shù)字顯示對(duì)文本內(nèi)容。

○? 對(duì)“變化值“添加文本設(shè)置，內(nèi)容為表達(dá)式 "+"+format(lasttime, "#.00") ，這里由于是首次計(jì)次，所以計(jì)次時(shí)間變化量就為當(dāng)前變量lasttime的值，在數(shù)字前增加一個(gè)“+“表示時(shí)間增量。這里還涉及一個(gè)在Protopie中將數(shù)字轉(zhuǎn)換為文本格式時(shí)，可以指定數(shù)字顯示格式的表達(dá)式。format(lasttime, "#.00") 表示將lasttime作為文本顯示，同時(shí)數(shù)值上需要保留至小數(shù)點(diǎn)后兩位。

數(shù)字轉(zhuǎn)換為文本格式時(shí)，數(shù)字顯示格式的表達(dá)式說(shuō)明

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

○? 先對(duì)“計(jì)次標(biāo)題“、“具體時(shí)間“、“變化值“三個(gè)文本對(duì)高度進(jìn)行調(diào)整，使其高度等于count*32 ，32表示每行文本的顯示高度（文字大小為16，行距為2）

文本的高度設(shè)置

○? 對(duì)“計(jì)次標(biāo)題“添加文本設(shè)置，文本內(nèi)容使用表達(dá)式 `計(jì)次標(biāo)題`.text+"\n"+"計(jì)次"+count?。表示在原有的“計(jì)次標(biāo)題“文本內(nèi)容的基礎(chǔ)上，換行后顯示本次的計(jì)次數(shù)。

○? 同理將“具體時(shí)間“對(duì)文本內(nèi)容設(shè)置為 `具體時(shí)間`.text+"\n"+`分`.text+":"+`秒`.text+"."+`百分之一秒`.text?；將“變化值“對(duì)文本內(nèi)容設(shè)置為 `變化值`.text+"\n"+"+"+format(addedtime, "#.00")

Step8

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

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

界面左側(cè)按鈕顯示計(jì)次文本時(shí)的單擊觸發(fā)設(shè)置

Step9

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

○? 對(duì)變量ss、s、m、count的值重新設(shè)置到初始值。由于變量lasttime和addedtime是通過(guò)其他變量計(jì)算得到的所以不用做特別設(shè)置。

○? 將“計(jì)次標(biāo)題“、“具體時(shí)間“、“變化值“三個(gè)文本的內(nèi)容都設(shè)置為 ““ ，表示空文本無(wú)內(nèi)容。

○? 將“計(jì)次記錄“的滾頁(yè)容器層重新滾頁(yè)值初始的0的位置。

界面左側(cè)按鈕顯示復(fù)位文本時(shí)的單擊觸發(fā)設(shè)置

大功告成！?。】梢灾苯釉陬A(yù)覽窗中查看效果~~

案例源文件下載&預(yù)覽

https://cloud.protopie.io/p/ada86850ea

（源文件中有三個(gè)不同場(chǎng)景，對(duì)應(yīng)“時(shí)鐘”、“秒表”、“計(jì)時(shí)器”）

本篇教程作者：Annie；編輯 ：JJ?

相關(guān)教程：Protopie進(jìn)階教程--動(dòng)態(tài)時(shí)鐘（上）