很久沒(méi)更新教程了，今天和大家分享一個(gè)Tab按鈕特效！

最終效果

制作過(guò)程

基本元素設(shè)置

首先我們繪制出需要的背景色，完成后將“點(diǎn)擊搜索背景色”&“點(diǎn)擊喜歡背景色”透明度修改為0，并且將坐標(biāo)修改為0,0。

在按鈕位置，導(dǎo)入搜索和喜歡的2個(gè)圖標(biāo)。圖標(biāo)可以在“iconfont”搜索下載。

完成后，我們還需要設(shè)計(jì)一下，點(diǎn)擊后的按鈕顯示效果。

我們先將上圖中點(diǎn)擊后的效果透明度都設(shè)置為0，為了實(shí)現(xiàn)點(diǎn)擊后才顯示的效果。

完成以上要素后，進(jìn)行交互動(dòng)作的設(shè)置。

交互動(dòng)作設(shè)置

首先選擇默認(rèn)的搜索圖標(biāo)，增加“單擊”的動(dòng)作，進(jìn)行背景圖變換的設(shè)置。

“默認(rèn)背景”&“喜歡背景”透明度設(shè)置為0，“搜索背景”設(shè)置為100.

并且將喜歡的默認(rèn)按鈕，進(jìn)行移動(dòng)動(dòng)效的設(shè)置。

使用相同的設(shè)置，完成對(duì)“喜歡”按鈕的設(shè)置。

完成以上操作，就實(shí)現(xiàn)了點(diǎn)擊后，背景變色和圖標(biāo)移動(dòng)的效果。

下面我們來(lái)設(shè)置，點(diǎn)擊按鈕后，展現(xiàn)按鈕的效果。

選擇“搜索”按鈕，添加透明度的顯示，設(shè)置如下：

橙色搜索按鈕，透明度設(shè)置為100；

黑色搜索按鈕，透明度設(shè)置為0；

橙色背景，透明度設(shè)置為100；

serch，透明度設(shè)置為100；

同理，我們使用相同的設(shè)置應(yīng)用于“喜歡”按鈕。

完成以上操作，可以看到最終效果了。

下載地址

https://pan.baidu.com/s/11Us49nCEyizekV2IKnwBVA

如有問(wèn)題，歡迎訂閱留言！

更多教程，請(qǐng)?jiān)L問(wèn)我的主頁(yè)：http://m.codemsi.com/u/775515?

本文由 @ZQZ原型師 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)自作者