起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Protopie教程：App端Tab按鈕特效
很久沒更新教程了，今天和大家分享一個Tab按鈕特效！
最終效果
制作過程
基本元素設置
首先我們繪制出需要的背景色，完成后將“點擊搜索背景色”&“點擊喜歡背景色”透明度修改為0，并且將坐標修改為0,0。
在按鈕位置，導入搜索和喜歡的2個圖標。圖標可以在“iconfont”搜索下載。
完成后，我們還需要設計一下，點擊后的按鈕顯示效果。
我們先將上圖中點擊后的效果透明度都設置為0，為了實現點擊后才顯示的效果。
完成以上要素后，進行交互動作的設置。
交互動作設置
首先選擇默認的搜索圖標，增加“單擊”的動作，進行背景圖變換的設置。
“默認背景”&“喜歡背景”透明度設置為0，“搜索背景”設置為100.
并且將喜歡的默認按鈕，進行移動動效的設置。
使用相同的設置，完成對“喜歡”按鈕的設置。
完成以上操作，就實現了點擊后，背景變色和圖標移動的效果。
下面我們來設置，點擊按鈕后，展現按鈕的效果。
選擇“搜索”按鈕，添加透明度的顯示，設置如下：
橙色搜索按鈕，透明度設置為100；
黑色搜索按鈕，透明度設置為0；
橙色背景，透明度設置為100；
serch，透明度設置為100；
同理，我們使用相同的設置應用于“喜歡”按鈕。
完成以上操作，可以看到最終效果了。
下載地址
https://pan.baidu.com/s/11Us49nCEyizekV2IKnwBVA
如有問題，歡迎訂閱留言！
更多教程，請訪問我的主頁：http://www.aharts.cn/u/775515?
本文由 @ZQZ原型師 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自作者
美國物流筆記：nmfclist.com
評論
你好，我是ProtoPie團隊成員，感謝您制作ProtoPie教程。如果您有興趣成為內測成員，歡迎聯系我們support@protopie.io，來信說明您是ZQZ原型師即可。
郵件已發送 tpjaord#*.com