本文是教大家如何製作秒錶循環功能，一起來看看~
最近再做一個播放音樂的原型，在做播放界面時遇到了一個問題，就是怎麼實現播放時間秒錶的循環及開始/暫停。雖然上網查了不少資料，但對於我這個小白來說還是不太懂。所以這裡把自己做的方法總結了下希望對大家能有點幫助吧。
嗯……文檔有點長，不想看的可以直接文末獲取原型自行查看（原型是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://pan.baidu.com/s/1ogG5lDuWWkh9UtsPMBxWDQ；密碼：jokz
題圖來自Unsplash，基於CC0協議
閱讀更多 人人都是產品經理 的文章
