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

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

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

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

按鈕的樣式根據自己喜好調吧！

NO.1 設置開關兩種狀态（開始/暫停）

首先需要把開關（矩形）轉化為動态面版，形式上可以調一下填充區分下開始和暫停兩個狀态，當然不變也可以。（矩形—右鍵—轉為動态面闆，複制個state狀态，然後改下第二個狀态的形式。） like this~

（state1）

（state2）

我把暫停的填充藍色區分不同狀态。接下來設置面闆狀态動作：單擊時——改變面闆狀态，添加條件是當面闆狀态state1時，改變面闆狀态到states2；當面闆狀态state2時，改變面闆狀态到states1；控件就做好了，可以預覽下是否可以了。（浏覽器預覽～）

NO.2 給數字循環

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

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

如下圖：

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

首先分析這個0的現象，就是從0開始到9結束的循環。所以我們要先讓這個數字每秒相應加1，類似a=a 1對不對哈哈。

那麼多交互選哪個啊，目前我發現做這種數字循環最好用的還是“選中時”，因為你選中時可以再次觸發選中時，這樣就可以無限循環下去了。

當然這裡還需要開關來觸發選中，我們需要給開關加個交互就是當他是state1時點擊是state2（觸發）并且此時觸發選中所以我們button的交互就是：

（button開關狀态及觸發number1選中時動作）

以上就是所有button 的動作，我們目前隻用到了設置它本身到面闆狀态到動作，和一個觸發num1選中時的動作。

現在我們可以設置num1選中時的狀态了，“選中時”——設置文本——目标當前——值為[[LVAR1 1]];

如下圖：

（添加值）

“值”這裡會用到局部變量，點擊後面那個fx,會進入這個畫面：

（添加局部變量）

添加局部變量，按上圖設置好，你也可以把下面LVAR1改為其他名字，但是一定要和上面白框内的一緻。我沒改默認的LVAR1，點擊确定返回之前頁面自動改了。

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

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

我這裡加的是當前文本，<9時,就是說隻有小于9才會依次加1，這時預覽的話就是從0—9，正常到9之後就不再加了。

我們接下來就是當這個數字等于9時，讓這個數字隔1s變為0，添加動作、條件如下：

為了隻讓開關開啟時計時，我在情形裡又設置了個button條件，button==state2時，也就是說隻在開啟時才行。

完整的動作應該是下圖：

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

每個情形裡的觸發選中時是為了循環，浏覽器預覽下是不是已經小有成效了呢！

NO.3 設置number2

還是先分析現象，number2是0—5的循環并且當number2數字為5，number1為9時下一秒會是10狀态。我們這裡還是在number基礎上改。

當num1歸零時我們的num2是增加1，所以我們在num1歸零時加動作；所以我們就可以在情形2裡加，設置文本num2值為[[LVAR1 1]]：

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

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

接下來我們需要到添加當number1=9、number2=5時設置number2歸零，num1歸零我們之前做了。我們直接複制情形2就好了。

設置如下：

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

以上number2的動作做完了。

NO.4 設置number3

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

如圖：

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

NO.5 重置歸零

最後是等于4歸零，現在其實是04:59這個時候，重置歸零。

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

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

https:///s/1ogG5lDuWWkh9UtsPMBxWDQ；密碼：jokz

本文由 @Pbsddr 原創發布于人人都是産品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部