日常生活中，我們會(huì)看到各種各樣的倒計(jì)時(shí)設(shè)計(jì): 或是在一段視頻的開(kāi)頭罢浇；或是隱蔽在屏幕右上角陆赋，用于顯示廣告的時(shí)長(zhǎng)；或是在軟件啟動(dòng)頁(yè)面嚷闭，用于增強(qiáng)用戶對(duì)后面出現(xiàn)內(nèi)容的期待攒岛。不可否認(rèn)，倒計(jì)時(shí)是非常有用的胞锰。那么阵子，如何用簡(jiǎn)單的方法做出酷炫的倒計(jì)時(shí)效果呢？我們一起來(lái)學(xué)習(xí)一下胜蛉。
工具：Mockplus
所需時(shí)間：3分鐘
用Mockplus來(lái)做交互挠进，最大的特點(diǎn)就是簡(jiǎn)單快速。下圖中這個(gè)倒計(jì)時(shí)效果誊册，只需三步就可以實(shí)現(xiàn)领突。
?步驟一：自定義倒計(jì)時(shí)樣式
啟動(dòng)Mockplus，從左邊的組件庫(kù)中拖出一個(gè)圓形組件案怯，雙擊組件輸入數(shù)字君旦。
在右側(cè)的屬性面板中，將圓形的邊框調(diào)整為不可見(jiàn)嘲碱。此處我們將組件內(nèi)顏色設(shè)置為灰色金砍，數(shù)字顏色設(shè)置為白色。
選中這個(gè)組件麦锯，同時(shí)按下Alt鍵恕稠，將組件復(fù)制4份，并輸入對(duì)應(yīng)的數(shù)字（最后一個(gè)設(shè)置為空白圓形）扶欣。
?
?步驟二：設(shè)置交互
想實(shí)現(xiàn)倒計(jì)時(shí)的效果鹅巍，只需讓這幾個(gè)圓形陸續(xù)出現(xiàn)即可。在Mockplus中料祠，我們很容易實(shí)現(xiàn)這一點(diǎn)骆捧。
將原型4的連接點(diǎn)拖到圓形內(nèi)部，選擇“載入時(shí)”髓绽，“顯示/隱藏”敛苇。
?在右側(cè)的屬性面板，將組件設(shè)置為不可見(jiàn)顺呕。
?在右側(cè)的交互面板枫攀，設(shè)置可見(jiàn)性為顯示括饶，延遲為300ms, 執(zhí)行時(shí)長(zhǎng)為200ms。
同理脓豪，為圓形2設(shè)置同樣的交互，延遲設(shè)置為800ms (300ms+300ms+200ms )忌卤。
?
?
步驟三：合并這5個(gè)圓形
將5個(gè)圓形按照出現(xiàn)的先后順序從下層到上層重疊起來(lái)扫夜。點(diǎn)擊預(yù)覽，即可看到文章開(kāi)頭的倒計(jì)時(shí)效果驰徊。
?是不是很簡(jiǎn)單呢笤闯？其實(shí)，不僅僅是倒計(jì)時(shí)棍厂，利用Mockplus還可以實(shí)現(xiàn)各種各樣的交互效果颗味，比如常用的手風(fēng)琴菜單，鼠標(biāo)懸停菜單下拉等等牺弹。除此之外浦马，Mockplus的官方教程中還提供了許多獨(dú)特的設(shè)計(jì)方法，并體現(xiàn)了令人驚嘆的設(shè)計(jì)思維张漂。不信你可以去看看“利用滾動(dòng)區(qū)設(shè)置懸浮效果”這一章晶默，看完一定很有收獲。????
