国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

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

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

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

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

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

涉及protopie功能

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

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

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

實(shí)現(xiàn)思路

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

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

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

2. 滾動(dòng)選擇器的實(shí)現(xiàn)

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

3. 計(jì)時(shí)過程中的剩余時(shí)間記錄與顯示

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

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

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

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

有兩種思路：

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

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

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

Step1

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

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

Step2

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

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

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

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

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

Step3

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

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

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

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

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

Step4

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

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

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

①運(yùn)動(dòng)點(diǎn)&固定點(diǎn)，實(shí)現(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)效果顯示為一個(gè)黑色正圓。

Step5

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

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

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

變量ceilnow=ceil(now)變量lasth=floor((ceilnow/3600))

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

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

對(duì)變量lasth、lastm、lasts添加監(jiān)聽，對(duì)時(shí)分秒的文本內(nèi)容進(jìn)行設(shè)置，使其在顯示上永遠(yuǎn)顯示00:00:00的六位格式。

Step6

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

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

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

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

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

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

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

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

Step7

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

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

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

Step8

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

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

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

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