日常生活中，我們會看到各種各樣的倒計時設計:或是在一段視頻的開頭；或是隱蔽在屏幕右上角，用于顯示廣告的時長；或是在軟件啟動頁面，用于增強用戶對后面出現內容的期待。不可否認，倒計時是非常有用的。那么，如何用簡單的方法做出酷炫的倒計時效果呢？我們一起來學習一下。
工具：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的官方教程中還提供了許多獨特的設計方法，并體現了令人驚嘆的設計思維。不信你可以去看看“利用滾動區設置懸浮效果”這一章，看完一定很有收獲。
