本文是教大家如何制作秒表循環(huán)功能，一起來看看~

最近再做一個播放音樂的原型，在做播放界面時遇到了一個問題，就是怎么實現(xiàn)播放時間秒表的循環(huán)及開始/暫停。雖然上網(wǎng)查了不少資料，但對于我這個小白來說還是不太懂。所以這里把自己做的方法總結(jié)了下希望對大家能有點幫助吧。

嗯……文檔有點長，不想看的可以直接文末獲取原型自行查看（原型是9的8打不開）。

首先是建立四個文本或者矩形反正能輸入數(shù)字就行，然后還需要一個播放暫停對控件。四個文本控件，和一個矩形控件。

按鈕的樣式根據(jù)自己喜好調(diào)吧！

NO.1 設(shè)置開關(guān)兩種狀態(tài)（開始/暫停）

首先需要把開關(guān)（矩形）轉(zhuǎn)化為動態(tài)面版，形式上可以調(diào)一下填充區(qū)分下開始和暫停兩個狀態(tài)，當(dāng)然不變也可以。（矩形—右鍵—轉(zhuǎn)為動態(tài)面板，復(fù)制個state狀態(tài)，然后改下第二個狀態(tài)的形式。） like this~

（state1）

（state2）

我把暫停的填充藍(lán)色區(qū)分不同狀態(tài)。接下來設(shè)置面板狀態(tài)動作：單擊時——改變面板狀態(tài)，添加條件是當(dāng)面板狀態(tài)state1時，改變面板狀態(tài)到states2；當(dāng)面板狀態(tài)state2時，改變面板狀態(tài)到states1；控件就做好了，可以預(yù)覽下是否可以了。（瀏覽器預(yù)覽～）

NO.2 給數(shù)字循環(huán)

做之前網(wǎng)上找了很多資料，奈何我看不懂啊啥全局變量？

一臉懵接下來給數(shù)字添加交互，我這里分開做的，拉四個控件輸入0就是四個元件為0的元件，重命名num4、num3、num2、num1 依次是00:00里的四個零。

如下圖：

為了盡量減少添加動作，我決定只給最后一個0（num1）添加動作了。這個0將添加所有的0變化的動作。

首先分析這個0的現(xiàn)象，就是從0開始到9結(jié)束的循環(huán)。所以我們要先讓這個數(shù)字每秒相應(yīng)加1，類似a=a+1對不對哈哈。

那么多交互選哪個啊，目前我發(fā)現(xiàn)做這種數(shù)字循環(huán)最好用的還是“選中時”，因為你選中時可以再次觸發(fā)選中時，這樣就可以無限循環(huán)下去了。

當(dāng)然這里還需要開關(guān)來觸發(fā)選中，我們需要給開關(guān)加個交互就是當(dāng)他是state1（關(guān)閉）時點擊是state2（觸發(fā)）并且此時觸發(fā)選中所以我們button的交互就是：

（button開關(guān)狀態(tài)及觸發(fā)number1選中時動作）

以上就是所有button 的動作，我們目前只用到了設(shè)置它本身到面板狀態(tài)到動作，和一個觸發(fā)num1選中時的動作。

現(xiàn)在我們可以設(shè)置num1選中時的狀態(tài)了，“選中時”——設(shè)置文本——目標(biāo)當(dāng)前——值為[[LVAR1+1]];

如下圖：

（添加值）

“值”這里會用到局部變量，點擊后面那個fx,會進(jìn)入這個畫面：

（添加局部變量）

添加局部變量，按上圖設(shè)置好，你也可以把下面LVAR1改為其他名字，但是一定要和上面白框內(nèi)的一致。我沒改默認(rèn)的LVAR1，點擊確定返回之前頁面自動改了。

加完這個動作我們還要加個等待時間，就是0變成0+1的間隔，我們設(shè)置1000ms就是1s切換下個文本，這時可以預(yù)覽下看看是不是每隔1s依次加1了呢？

我們只需要數(shù)字到9就好了，這個數(shù)字會一直加怎么辦呢，我們可以給他加限制條件也就是添加情形就是只在這個情形下以下動作才會觸發(fā)。

我這里加的是當(dāng)前文本，<9時,就是說只有小于9才會依次加1，這時預(yù)覽的話就是從0—9，正常到9之后就不再加了。

我們接下來就是當(dāng)這個數(shù)字等于9時，讓這個數(shù)字隔1s變?yōu)?，添加動作、條件如下：

為了只讓開關(guān)開啟時計時，我在情形里又設(shè)置了個button條件，button==state2時，也就是說只在開啟時才行。

完整的動作應(yīng)該是下圖：

(情形1是0—9循環(huán)，情形2是依次遞增1)

每個情形里的觸發(fā)選中時是為了循環(huán)，瀏覽器預(yù)覽下是不是已經(jīng)小有成效了呢！

NO.3 設(shè)置number2

還是先分析現(xiàn)象，number2是0—5的循環(huán)并且當(dāng)number2數(shù)字為5，number1為9時下一秒會是10狀態(tài)。我們這里還是在number基礎(chǔ)上改。

當(dāng)num1歸零時我們的num2是增加1，所以我們在num1歸零時加動作；所以我們就可以在情形2里加，設(shè)置文本num2值為[[LVAR1+1]]：

這里把名字改下，增加“number2增加1”便于理解。

同樣的動作不同目標(biāo)，可以設(shè)置在后面有個添加目標(biāo)的按鈕，（R9版本是這樣），R8也可以直接設(shè)。當(dāng)然我們還要設(shè)置條件不然就會一直加下去，所以在條件里增加里文字number2<5時，也就是說最大等于4時會按照下面的動作來加。

接下來我們需要到添加當(dāng)number1=9、number2=5時設(shè)置number2歸零，num1歸零我們之前做了。我們直接復(fù)制情形2就好了。

設(shè)置如下：

這里我們只是增加了個number2=0 的動作和修改了number2=5條件。

以上number2的動作做完了。

NO.4 設(shè)置number3

接下來是number3也就是分鐘的設(shè)置，每隔59秒，number3增加1，所以我們就可以直接在情形3里加number3的動作了，直接添加設(shè)置文本number3=[[LVAR1+1]]

如圖：

條件里又增加了當(dāng)number<4時，也就是03:59；這里根據(jù)個人情況定我是預(yù)置的5分鐘所以這里寫了小于4，小于4時number3會增加1。

NO.5 重置歸零

最后是等于4歸零，現(xiàn)在其實是04:59這個時候，重置歸零。

同樣是復(fù)制上一個情形，修改條件為number3=4；增加動作num3文本為0。

這樣就完成了秒表循環(huán)播放/暫停的原型了，最后可以改變元件形式讓它更好看點。

演示地址：https://axhub.im/ax9/f70f05078a3c0ce2

下載地址：

鏈接: https://pan.baidu.com/s/1dDSrysCrIWo8X95hrPSboA 提取碼: rm3a

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

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