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

計時器——用戶可設(shè)定時間段，點擊開始后時間倒數(shù)，直到結(jié)束。本案例中用戶可以設(shè)定24小時以內(nèi)的任意時間值進行倒計時，開始計時后界面顯示剩余時間，同時圓環(huán)顯示剩余時間比例，支持開始、暫停、繼續(xù)、取消操作。

實現(xiàn)效果

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

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

計時器的三個流程：設(shè)置時間?計時過程中?時間到達提示。

設(shè)置時間界面由常見的輪盤選擇器和兩個按鈕組成。計時過程中，界面上半部分顯示剩余時間，圓環(huán)顯示剩余時間比例；下半部顯示兩個操作按鈕。時間到達后，提示頁面上半部分顯示文本提示，操作按鈕僅顯示“確定“按鈕。

涉及protopie功能

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

反應(yīng)：賦值、透明度、文本、停止、顏色、旋轉(zhuǎn)、排序、重置

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

實現(xiàn)思路

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

在計時器的三大流程（設(shè)置時間?計時過程中?時間到達提示）中，設(shè)置時間流程中，用戶操作按鈕顯示“開始”和“取消”，其中取消按鈕不可用。

計時開始后，操作按鈕變?yōu)椤皶和！焙涂捎玫摹叭∠卑粹o，用戶點擊“暫停”按鈕使計時暫停及繼續(xù)，同時按鈕文本也會隨點擊在“繼續(xù)”和“暫停”中進行切換。用戶點擊“取消”，本次計時操作不再進行，回到計時開始前的設(shè)置時間頁面。時間到達后，頁面中其他按鈕消失，顯示“確定”按鈕，點擊確定使計時器回到初始狀態(tài)。

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

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

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

計時器的剩余時間與之前時鐘和秒表的案例正好相反，屬于倒數(shù)計算，而且具體剩余時分秒數(shù)值的顯示需要涉及時間單位的換算。首先將滾動選擇器選定的時分秒數(shù)值統(tǒng)一換算成總秒數(shù)，才可以通過每秒-1實現(xiàn)當(dāng)前剩余時間計算。

然后需要將這個剩余時間再轉(zhuǎn)換為時、分、秒的顯示，這里利用了Protopie的數(shù)學(xué)函數(shù)floor()的取整函數(shù)。舉例來說，當(dāng)剩余時間為12340秒時，其中小時數(shù)為floor(12340/3600) → 3小時，分鐘數(shù)為floor((12340-3*3600)/60) → 25分鐘,秒數(shù)12340-3*3600-25*60 → 40秒，可以表達為03:25:40。

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

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

有兩種思路：

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

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

具體實現(xiàn)步驟

Step1

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

建立秒選擇、分鐘選擇、小時選擇三個滑頁容器層，高度可以顯示7個文本高度，將0-59、0-59、0-23的多層文本層分別放置其中。并將滑頁設(shè)置如下，自定義高度為文本高度，案例中為40。由于第一個文本和最后一個文本都需要滑動到中間的位置，所以還需要在文本前后，加上段前和段后的與背景色一致的矩形，高度為3個文本高度。

Step2

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

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

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

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

利用聯(lián)動將變量hour、min、sec與滾動選擇器選擇的小時、分鐘、秒數(shù)關(guān)聯(lián)起來。由于我們自定義了每次滑頁值，所以可以直接使用單條聯(lián)動范圍設(shè)定，對應(yīng)可以直接得到整數(shù)值。實現(xiàn)這一步后可以開啟變量顯示，預(yù)覽一下具體效果。

Step3

新建變量all、now，對應(yīng)用戶設(shè)定計時的總時長和當(dāng)前剩余時長。使用戶點擊“開始”后支持計時倒數(shù)，而開始后也支持計時的暫停、繼續(xù)及取消。

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

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

當(dāng)文本為“暫?！睍r停止變量now的倒數(shù)計時；當(dāng)文本為“繼續(xù)”時重新進行每0.01秒減少0.01，延遲0.01進行的設(shè)置。

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

Step4

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

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

環(huán)形百分比主要分為三部分：

①運動點&固定點，實現(xiàn)描邊的圓角效果；

②右半圓環(huán)分為底部黑色圓環(huán)和上部白色半透遮擋層（旋轉(zhuǎn)180°、默認(rèn)透明度0%）；

③左半圓環(huán)分為底部黑色圓環(huán)和上部白色半透遮擋層（旋轉(zhuǎn)180°、默認(rèn)透明度90%）。

由于圖層關(guān)系，默認(rèn)效果顯示為一個黑色正圓。

Step5

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

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

結(jié)合前文對時間換算的思考，增加對變量now的監(jiān)聽觸發(fā)，對變量ceilnow、lasth、lastm、lasts，分別進行賦值設(shè)置。

變量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)容進行設(shè)置，使其在顯示上永遠(yuǎn)顯示00:00:00的六位格式。

Step6

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

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

然后是左右半圓的旋轉(zhuǎn)設(shè)置，案例中主要是對白色半透遮擋層進行旋轉(zhuǎn)設(shè)置。左右半邊的旋轉(zhuǎn)看為兩個階段，使用條件判斷后進行設(shè)置。

1. 當(dāng)變量now＞all/2時，增加排序的設(shè)置，將左側(cè)半圓及其遮擋層放置于右側(cè)半圓及遮擋層之后，右側(cè)半圓遮擋透明度設(shè)為0%，再添加左側(cè)遮擋的旋轉(zhuǎn)表達式，案例中使用的是 (now/all)*360-180 ，實際的話需要結(jié)合各自使用的切圖資源。
2. 變量now＜all/2且≥0時，增加排序使得右側(cè)半圓及其遮擋層放置于左側(cè)之后，將右側(cè)半圓遮擋透明度設(shè)為90%，使其顯示并添加與右側(cè)一致的旋轉(zhuǎn)表達式。

設(shè)置完成后測試了一下，對幾個節(jié)點值再增加旋轉(zhuǎn)設(shè)置以保證效果：

①當(dāng)變量now=變量all時，即用戶開始計時的時候?qū)⒆笥野雸A的上層遮擋均設(shè)為不被遮擋。

②當(dāng)變量now=all/2 時，再做一次左右遮擋的旋轉(zhuǎn)設(shè)置，使其顯示為左側(cè)完全遮擋、右側(cè)完全顯示。

③變量now=0且開始文本內(nèi)容為“暫?！睍r，停止變量now，并且將右側(cè)的遮擋半圓完全遮擋右側(cè)半圈。

Step7

增加“時間到！”文本和“確定”按鈕，當(dāng)?shù)竭_計時時間時顯示出來。確認(rèn)按鈕支持點擊操作，實現(xiàn)完整的操作邏輯。

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

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

Step8

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

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

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

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