導讀

計時器——用戶可設定時間段辅甥，點擊開始后時間倒數(shù)，直到結束院崇。

本案例中用戶可以設定24小時以內(nèi)的任意時間值進行倒計時肆氓，開始計時后界面顯示剩余時間，同時圓環(huán)顯示剩余時間比例底瓣，支持開始谢揪、暫停、繼續(xù)捐凭、取消操作拨扶。

本篇教程涉及的protopie功能

○? 觸發(fā)：監(jiān)聽、單擊茁肠、聯(lián)動

○? 反應：賦值患民、透明度、文本垦梆、停止匹颤、顏色、旋轉(zhuǎn)托猩、排序印蓖、重置

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

具體實現(xiàn)效果

計時器具體效果截圖

具體實現(xiàn)的動態(tài)效果

制作思路

1.用戶操作按鈕的邏輯梳理

在計時器的三大流程（設置時間?計時過程中?時間到達提示）中，設置時間流程中京腥，用戶操作按鈕顯示“開始”和“取消”赦肃，其中取消按鈕不可用。計時開始后公浪，操作按鈕變?yōu)椤皶和他宛！焙涂捎玫摹叭∠卑粹o，用戶點擊“暫颓菲”按鈕使計時暫停及繼續(xù)厅各，同時按鈕文本也會隨點擊在“繼續(xù)”和“暫停”中進行切換预柒；用戶點擊“取消”讯检，本次計時操作不再進行琐鲁，回到計時開始前的設置時間頁面卫旱。時間到達后人灼，頁面中其他按鈕消失，顯示“確定”按鈕顾翼，點擊確定使計時器回到初始狀態(tài)投放。

2.滾動選擇器的實現(xiàn)

滾動選擇器是手機端常見的一種選擇器，選擇器會羅列所有的選項适贸，用戶可以通過滾動撥盤確認所需要的具體項灸芳。在實現(xiàn)的思路上，先利用protopie中滑頁容器層實現(xiàn)按檔位的滑動效果拜姿，而后可以通過聯(lián)動觸發(fā)將滑頁值與具體選項的值關聯(lián)起來烙样。如果滑動過程中需要進行尺寸和透明度變化使其更接近真機效果，理論上也可以通過聯(lián)動層進行設置蕊肥。

3.計時過程中的剩余時間記錄與顯示

計時器的剩余時間與之前時鐘和秒表的案例正好相反谒获，屬于倒數(shù)計算，而且具體剩余時分秒數(shù)值的顯示需要涉及時間單位的換算壁却。首先將滾動選擇器選定的時分秒數(shù)值統(tǒng)一換算成總秒數(shù)批狱，才可以通過每秒-1實現(xiàn)當前剩余時間計算。然后需要將這個剩余時間再轉(zhuǎn)換為時展东、分赔硫、秒的顯示，這里利用了Protopie的數(shù)學函數(shù)floor()的取整函數(shù)盐肃。舉例來說爪膊，當剩余時間為12340秒時，其中小時數(shù)為floor(12340/3600) → 3小時砸王，分鐘數(shù)為floor((12340-3*3600)/60) → 25分鐘,秒數(shù)12340-3*3600-25*60 → 40秒推盛，可以表達為03:25:40。

floor()取整函數(shù)說明

4.剩余時間圓環(huán)比例的實現(xiàn)

在實現(xiàn)剩余時間的環(huán)狀百分的實現(xiàn)上最大的難點在于Protopie中對圖形描邊的設置只有顏色处硬、透明度小槐、位置和寬度可以設置，想要實現(xiàn)最終效果上的環(huán)狀百分比圖的效果需要使用一些障眼法荷辕，對環(huán)狀圖進行切分后做旋轉(zhuǎn)設置凿跳。

有兩種思路：

a.將黑色圓環(huán)做切割后做旋轉(zhuǎn)設置。具體切割方法見下圖說明將圓環(huán)不斷進行對半切割疮方，實現(xiàn)效果就是將1號線段先進行角度旋轉(zhuǎn)后控嗜，當其旋轉(zhuǎn)180度后隱藏并開始旋轉(zhuǎn)2號線段，旋轉(zhuǎn)90度后隱藏開始旋轉(zhuǎn)3號線段骡显，以此類推疆栏。（我實現(xiàn)過程中發(fā)現(xiàn)這種方法圖層很多曾掂，管理起來太復雜基本pass這個方案，有興趣的可以自行嘗試）

思路a 圖示說明

b.將黑色圓環(huán)做對半切割壁顶，左右分別做旋轉(zhuǎn)設置珠洗，同時在左側增加與背景一致的遮擋圖層，使得右半側圓環(huán)可以旋轉(zhuǎn)入內(nèi)若专，具體圖層關系如下许蓖。這樣圖層管理更便捷，下面的具體實現(xiàn)步驟中使用的就是這種方法调衰。

思路b 圖示說明

具體實現(xiàn)步驟

step1

新建Protopie文件膊爪，實現(xiàn)滾動選擇器及按鈕的基本視效。

滾動選擇器的基本視效及圖層關系

○? 建立秒選擇嚎莉、分鐘選擇米酬、小時選擇三個滑頁容器層，高度可以顯示7個文本高度趋箩，將0-59赃额、0-59、0-23的多層文本層分別放置其中阁簸。并將滑頁設置如下爬早，自定義高度為文本高度，案例中為40?启妹。由于第一個文本和最后一個文本都需要滑動到中間的位置筛严，所以還需要在文本前后，加上段前和段后的與背景色一致的矩形饶米，高度為3個文本高度桨啃。

滑頁方式自定義設置

Step2

實現(xiàn)滾動選擇器的滾動漸變效果，并建立三個變量分別命名為hour檬输、min照瘾、sec使變量與滾動選擇器選擇的小時、分鐘丧慈、秒數(shù)關聯(lián)起來析命。

○? 在滾動選擇器滾動過程中的漸變效果有兩種實現(xiàn)方式：

方式一：通過聯(lián)動滑頁容器的滾頁值與單個具體文本的透明度進行聯(lián)動設置，具體設置如下逃默，但是這個方法需要對滑頁容器中每個文本進行單獨設置鹃愤，較為繁瑣，不建議使用完域。

方式一的聯(lián)動設置

方式二：可以直接在滾頁容器層上添加背景色漸變的蒙版软吐，模擬漸變效果。

方式二的漸變蒙版效果

○? 利用聯(lián)動將變量hour吟税、min凹耙、sec與滾動選擇器選擇的小時姿现、分鐘、秒數(shù)關聯(lián)起來肖抱。由于我們自定義了每次滑頁值备典，所以可以直接使用單條聯(lián)動范圍設定，對應可以直接得到整數(shù)值虐沥。實現(xiàn)這一步后可以開啟變量顯示熊经，預覽一下具體效果。

聯(lián)動觸發(fā)下的賦值設置

Step3

新建變量all欲险、now，對應用戶設定計時的總時長和當前剩余時長匹涮。使用戶點擊“開始”后支持計時倒數(shù)天试，而開始后也支持計時的暫停、繼續(xù)及取消然低。

○? 當用戶設定的時間為0時點擊“開始”不起效喜每，為了進行操作判斷，變量all的即用戶設定的總時長最好是可以在用戶滾動時可以直接進行賦值計算雳攘，所以首先對變量hour带兜、min、sec添加監(jiān)聽吨灭，每次變化都對變量all進行一次賦值刚照，表達式：(hour*3600)+(min*60)+sec

賦值表達式設置

○? 對開始的文本添加單擊觸發(fā)，當文本為“開始”且變量all≠0時喧兄，對變量now進行兩次賦值无畔，首先使其等于變量all的值，而后使其0.01秒減少0.01吠冤，延遲0.01進行浑彰，這邊使用0.01的時間精度使得暫停和繼續(xù)不用做復雜單秒內(nèi)的時間判斷。

對變量now的兩次賦值設置

○? 當文本為“暫驼蓿”時停止變量now的倒數(shù)計時郭变；當文本為“繼續(xù)”時重新進行每0.01秒減少0.01，延遲0.01進行的設置涯保。

○? 最后對這幾種狀況的文本內(nèi)容诉濒、文本顏色、文本透明度進行設定將操作連貫起來遭赂。

對“開始”文本的單擊觸發(fā)設置

Step4

將設定時間的滾動選擇器隱藏循诉，并剩余時間的數(shù)字表達和環(huán)形百分比資源導入，以實現(xiàn)倒計時過程中的基本視效撇他。

倒計時過程中的基本視效及圖層關系

○? 數(shù)字表達中需要拆分時分秒茄猫，使用不同的文本圖層

○? 環(huán)形百分比主要分為三部分：①運動點&固定點狈蚤，實現(xiàn)描邊的圓角效果；②右半圓環(huán)分為底部黑色圓環(huán)和上部白色半透遮擋層（旋轉(zhuǎn)180°划纽、默認透明度0%）脆侮；③左半圓環(huán)分為底部黑色圓環(huán)和上部白色半透遮擋層（旋轉(zhuǎn)180°、默認透明度90%）勇劣。由于圖層關系靖避，默認效果顯示為一個黑色正圓。

Step5

新建變量ceilnow比默、lasth幻捏、lastm、lasts命咐，計算具體的剩余時間篡九，將計算時間換算并顯示為具體文本，實現(xiàn)計時過程中數(shù)字計時部分醋奠。

○? 由于變量now之前設置中計算精度為0.01秒榛臼，所以計算剩余時間時先要進行一次去小數(shù)點后整數(shù)進一的設置，利用 ceil() 表達式窜司，并復制給變量ceilnow沛善。

ceil()取整表達式說明

○? 結合前文對時間換算的思考，增加對變量now的監(jiān)聽觸發(fā)塞祈，對變量ceilnow金刁、lasth、lastm织咧、lasts胀葱，分別進行賦值設置。

? ??????變量ceilnow=ceil(now)

? ??????變量lasth=floor((ceilnow/3600))

? ??????變量lastm=floor((ceilnow-3600*lasth)/60)

? ??????變量lasts=ceilnow-3600*lasth-60*lastm

○? 對變量lasth笙蒙、lastm抵屿、lasts添加監(jiān)聽，對時分秒的文本內(nèi)容進行設置捅位，使其在顯示上永遠顯示00:00:00的六位格式轧葛。

監(jiān)聽觸發(fā)下的文本設置

Step6

實現(xiàn)倒計時過程中，環(huán)形剩余時間百分比的顯示艇搀。

○? 首先是圓環(huán)邊緣圓角的小圓點的旋轉(zhuǎn)設置尿扯，在對變量now的監(jiān)聽觸發(fā)下增加運動點的旋轉(zhuǎn)設置。使其旋轉(zhuǎn)角度與剩余時間與設定時間的比例相關焰雕，旋轉(zhuǎn)至使用表達式 (now/all)*360

○? 然后是左右半圓的旋轉(zhuǎn)設置衷笋，案例中主要是對白色半透遮擋層進行旋轉(zhuǎn)設置。左右半邊的旋轉(zhuǎn)看為兩個階段矩屁，使用條件判斷后進行設置辟宗。A.當變量now＞all/2時爵赵，增加排序的設置，將左側半圓及其遮擋層放置于右側半圓及遮擋層之后泊脐，右側半圓遮擋透明度設為0%空幻，再添加左側遮擋的旋轉(zhuǎn)表達式，案例中使用的是 (now/all)*360-180 容客，實際的話需要結合各自使用的切圖資源秕铛。B.變量now＜all/2且≥0時，增加排序使得右側半圓及其遮擋層放置于左側之后缩挑，將右側半圓遮擋透明度設為90%但两，使其顯示并添加與右側一致的旋轉(zhuǎn)表達式。

○? 設置完成后測試了一下调煎，對幾個節(jié)點值再增加旋轉(zhuǎn)設置以保證效果：①當變量now=變量all時镜遣，即用戶開始計時的時候?qū)⒆笥野雸A的上層遮擋均設為不被遮擋。②當變量now=all/2 時士袄，再做一次左右遮擋的旋轉(zhuǎn)設置，使其顯示為左側完全遮擋谎僻、右側完全顯示娄柳。③變量now=0且開始文本內(nèi)容為“暫统嗑埽”時，停止變量now，并且將右側的遮擋半圓完全遮擋右側半圈。

監(jiān)聽變量now的所有反應設置

Step7

增加“時間到艺骂！”文本和“確定”按鈕蹄衷，當?shù)竭_計時時間時顯示出來宦芦。確認按鈕支持點擊操作，實現(xiàn)完整的操作邏輯恬涧。

○? 增加“時間到厦瓢！”和“確定”兩個文本圖層，監(jiān)聽變量now當其=0且開始文本內(nèi)容為“暫停”時，添加透明度的設置，使其顯示為下面右圖所示效果。

時間到時所有反應設置及視效效果

○? 對本文“確定”添加點擊觸發(fā)志鹃，添加一個重置，使其點擊后使場景重置缰趋，恢復到最初效果。

“確定”文本單擊觸發(fā)下的重置設置

Step8

最后整體整理一下所有圖層透明度關系秘血，使頁面所有元素在不同的計時階段中下進行正常的顯示及隱藏。

大功告成！８屉取晰骑！可以直接在預覽窗中查看效果~~

案例源文件下載&預覽

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

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

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

相關教程：Protopie進階教程--動態(tài)時鐘（上）

相關教程：Protopie進階教程--動態(tài)時鐘（中）