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

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

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

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

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

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

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

（state1）

（state2）

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

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

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

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

如下圖：

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

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

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

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

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

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

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

如下圖：

（添加值）

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

（添加局部變量）

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

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

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

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

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

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

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

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

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

NO.3 設(shè)置number2

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

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

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

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

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

設(shè)置如下：

這里我們只是增加了個(gè)number2=0 的動(dòng)作和修改了number2=5條件。

以上number2的動(dòng)作做完了。

NO.4 設(shè)置number3

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

如圖：

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

NO.5 重置歸零

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

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

這樣就完成了秒表循環(huán)播放/暫停的原型了，最后可以改變?cè)问阶屗每袋c(diǎ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é)議