中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

具體實現效果

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

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

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

本篇教程涉及的protopie功能

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

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

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

制作思路

時間計算及數字表達

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

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

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

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

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

對同一對象的單一觸發(fā)實現不同操作

秒表的頁面中間為操作區(qū)域，放置兩個按鈕，秒表未啟動時左右按鈕分別為“計次”和“啟動”，其中“計次”按鈕不可用；當開始計時后“計次”按鈕可用，同時“啟動”按鈕變?yōu)椤巴Ｖ埂保划斢脩酎c擊“停止”按鈕，左側“計次”按鈕變?yōu)椤皬臀弧保巴Ｖ埂币仓匦伦優(yōu)椤皢印?；用戶點擊“復位”，回到最初未啟動的按鈕狀態(tài)。

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

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

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

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

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

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

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

具體實現步驟

step1

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

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

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

Step2

建立操作按鈕之間的關系

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

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

當“啟動”的文本為“停止”時，將“計次”文本變?yōu)椤皬臀弧?；將“停止”文本變?yōu)椤皢印?；將“啟動”圖層的顏色重新設為為綠色。

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

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

Step3

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

Step4

在對“啟動“文本的點擊觸發(fā)下，添加對變量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的賦值計算停止保持不變。

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

Step5

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

Step6

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

當“計次“文本為“計次“透明度為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賦值之后的，所以當執(zhí)行滾頁操作時，當前的變量count已經增加1了。

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

Step9

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

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

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

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

題圖來自Unsplash，基于CC0協議