日常生活中，我們會看到各種各樣的倒計時設(shè)計: 或是在一段視頻的開頭；或是隱蔽在屏幕右上角，用于顯示廣告的時長；或是在軟件啟動頁面，用于增強用戶對后面出現(xiàn)內(nèi)容的期待。不可否認，倒計時是非常有用的。那么，如何用簡單的方法做出酷炫的倒計時效果呢？我們一起來學(xué)習(xí)一下。
工具：Mockplus
所需時間：3分鐘
用Mockplus來做交互，最大的特點就是簡單快速。下圖中這個倒計時效果，只需三步就可以實現(xiàn)。
?步驟一：自定義倒計時樣式
啟動Mockplus，從左邊的組件庫中拖出一個圓形組件，雙擊組件輸入數(shù)字。
在右側(cè)的屬性面板中，將圓形的邊框調(diào)整為不可見。此處我們將組件內(nèi)顏色設(shè)置為灰色，數(shù)字顏色設(shè)置為白色。
選中這個組件，同時按下Alt鍵，將組件復(fù)制4份，并輸入對應(yīng)的數(shù)字（最后一個設(shè)置為空白圓形）。
?
?步驟二：設(shè)置交互
想實現(xiàn)倒計時的效果，只需讓這幾個圓形陸續(xù)出現(xiàn)即可。在Mockplus中，我們很容易實現(xiàn)這一點。
將原型4的連接點拖到圓形內(nèi)部，選擇“載入時”，“顯示/隱藏”。
?在右側(cè)的屬性面板，將組件設(shè)置為不可見。
?在右側(cè)的交互面板，設(shè)置可見性為顯示，延遲為300ms, 執(zhí)行時長為200ms。
同理，為圓形2設(shè)置同樣的交互，延遲設(shè)置為800ms (300ms+300ms+200ms )。
?
?
步驟三：合并這5個圓形
將5個圓形按照出現(xiàn)的先后順序從下層到上層重疊起來。點擊預(yù)覽，即可看到文章開頭的倒計時效果。
?是不是很簡單呢？其實，不僅僅是倒計時，利用Mockplus還可以實現(xiàn)各種各樣的交互效果，比如常用的手風琴菜單，鼠標懸停菜單下拉等等。除此之外，Mockplus的官方教程中還提供了許多獨特的設(shè)計方法，并體現(xiàn)了令人驚嘆的設(shè)計思維。不信你可以去看看“利用滾動區(qū)設(shè)置懸浮效果”這一章，看完一定很有收獲。????
