日常生活中，我們會看到各種各樣的倒計時設計:或是在一段視訊的開頭；或是隐蔽在螢幕右上角，用于顯示廣告的時長；或是在軟體啟動頁面，用于增強使用者對後面出現内容的期待。不可否認，倒計時是非常有用的。那麼，如何用簡單的方法做出酷炫的倒計時效果呢？我們一起來學習一下。
工具：
Mockplus所需時間：3分鐘
用Mockplus來做互動，最大的特點就是簡單快速。下圖中這個倒計時效果，隻需三步就可以實作。
ALT: Countdown made by Mockplus
步驟一：自定義倒計時樣式
啟動Mockplus，從左邊的元件庫中拖出一個圓形元件，輕按兩下元件輸入數字。
在右側的屬性面闆中，将圓形的邊框調整為不可見。此處我們将元件内顔色設定為灰色，數字顔色設定為白色。
選中這個元件，同時按下Alt鍵，将元件複制4份，并輸入對應的數字（最後一個設定為空白圓形）。
ALT: make countdown with Mockplus 1
ALT: make countdown with Mockplus 2
步驟二：設定互動
想實作倒計時的效果，隻需讓這幾個圓形陸續出現即可。在Mockplus中，我們很容易實作這一點。
将原型4的連接配接點拖到圓形内部，選擇“載入時”，“顯示/隐藏”。
ALT: make countdown with Mockplus 3
在右側的屬性面闆，将元件設定為不可見。
ALT: make countdown with Mockplus 4
在右側的互動面闆，設定可見性為顯示，延遲為300ms, 執行時長為200ms。
同理，為圓形2設定同樣的互動，延遲設定為800ms (300ms+300ms+200ms )。
ALT: make countdown with Mockplus 5
ALT: make countdown with Mockplus 6
步驟三：合并這5個圓形
将5個圓形按照出現的先後順序從下層到上層重疊起來。點選預覽，即可看到文章開頭的倒計時效果。
ALT: make countdown with Mockplus 7
是不是很簡單呢？其實，不僅僅是倒計時，利用Mockplus還可以實作各種各樣的互動效果，比如常用的
手風琴菜單，
滑鼠懸停菜單下拉等等。除此之外，Mockplus的官方教程中還提供了許多獨特的設計方法，并展現了令人驚歎的設計思維。不信你可以去看看
“利用滾動區設定懸浮效果”這一章，看完一定很有收獲。