導(dǎo)讀

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

本篇教程涉及的protopie功能

○? 觸發(fā)：監(jiān)聽拾碌、單擊

○? 反應(yīng)：賦值、文本街望、停止校翔、顏色、透明度灾前、大小防症、滾頁

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

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

秒表具體效果截圖

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

制作思路

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

對于基礎(chǔ)時(shí)間的計(jì)算方式與時(shí)鐘教程中的計(jì)算方式類似，差異在于哎甲，秒表的時(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í)就開始循環(huán)計(jì)時(shí)践图，但秒表需要在用戶做點(diǎn)擊操作時(shí)進(jìn)行掺冠，同時(shí)需要支持暫停和繼續(xù)的操作，暫停的操作可以利用protopie中的“停止”暫停時(shí)間計(jì)算平项。

“停止”的具體說明

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

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

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

秒表的頁面中間為操作區(qū)域，放置兩個(gè)按鈕销钝，秒表未啟動(dòng)時(shí)左右按鈕分別為“計(jì)次”和“啟動(dòng)”有咨，其中“計(jì)次”按鈕不可用；當(dāng)開始計(jì)時(shí)后“計(jì)次”按鈕可用蒸健，同時(shí)“啟動(dòng)”按鈕變?yōu)椤巴Ｖ埂弊恚划?dāng)用戶點(diǎn)擊“停止”按鈕婉商，左側(cè)“計(jì)次”按鈕變?yōu)椤皬?fù)位”，“停止”也重新變?yōu)椤皢?dòng)”渣叛；用戶點(diǎn)擊“復(fù)位”丈秩，回到最初未啟動(dòng)的按鈕狀態(tài)。當(dāng)然可以使用四個(gè)不同圖層進(jìn)行透明度設(shè)置來實(shí)現(xiàn)效果淳衙。同樣也可以僅使用兩個(gè)文本圖層添加對文本內(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í)間差的值塑顺。每次用戶點(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í)會出現(xiàn)次數(shù)顯示超出單屏的顯示，這時(shí)在計(jì)次的同時(shí)需要隨著計(jì)次的增加不斷增加文本的顯示區(qū)域并利用滾頁容器層和滾頁反應(yīng)使其最后一條可以顯示出來种蘸。

具體實(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ù)字使用分開的三個(gè)文本圖層滨彻，默認(rèn)顯示為00:00.00藕届。（與時(shí)鐘案例類似）

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

Step2

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

根據(jù)前面梳理的按鈕邏輯對“啟動(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è)為為綠色睡雇。

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

對“計(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%。

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

Step3

建立六個(gè)變量分別命名為ss祠墅、s侮穿、m、count毁嗦、lasttime亲茅、addedtime，分別對應(yīng)微秒數(shù)狗准、秒數(shù)克锣、分鐘數(shù)、計(jì)次次數(shù)腔长、上次計(jì)次時(shí)間袭祟、最近兩次計(jì)次的時(shí)間差。（僅適用于當(dāng)前場景的變量即可）所有變量均為數(shù)字變量饼酿，除了計(jì)次次數(shù)默認(rèn)值為1之外榕酒，其他所有變量的初始默認(rèn)值均為0。

變量面板中建立ss故俐、s想鹰、m、count药版、lasttime辑舷、addedtime共6個(gè)變量

Step4

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

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

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

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

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

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

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

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

對于變量ss苏章、s寂嘉、m的停止設(shè)置

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

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

Step5

添加觸發(fā)“監(jiān)聽”枫绅，監(jiān)聽不斷變化的變量ss泉孩，將秒表數(shù)字顯示的文本與變量ss、s并淋、m的關(guān)系建立起來寓搬。對于微秒數(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

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

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

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

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

○? 再對變量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；

○? 再對變量lasttime賦值?m*60+s+ss/100 沿侈；

○? 最后對變量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)系建立起來咙好。同時(shí)考慮文本顯示，將文本的高度與變量count也建立關(guān)聯(lián)铣鹏，使其每次高度都可以增加一行顯示敷扫。

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

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

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

○? 對“變化值“添加文本設(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á)式說明

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

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

文本的高度設(shè)置

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

○? 同理將“具體時(shí)間“對文本內(nèi)容設(shè)置為 `具體時(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)時(shí)凰锡，即 count>8 時(shí)未舟，增加滾頁設(shè)置，使其自動(dòng)向下滾動(dòng)一行掂为。使用表達(dá)式：(count-9)*32 這里表達(dá)式中需要將變量count-9是由于裕膀，整個(gè)條件 count>8 是放置在count+1賦值之后的，所以當(dāng)執(zhí)行滾頁操作時(shí)勇哗，當(dāng)前的變量count已經(jīng)增加1了昼扛。

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

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

Step9

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

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

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

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

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

大功告成Ｅ钔啤Ｗ卑簟！可以直接在預(yù)覽窗中查看效果~~

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

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

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

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

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