值得一看的小程序 TabBar 創(chuàng)意動畫

Hi 頭像最近進(jìn)行了 v2 版大改版，其中的交互動畫得到了不少好友的稱贊。今天我就來分享一些關(guān)于小程序 TabBar 創(chuàng)意動畫，將從 TabBar 類型、完整的 TabBar 創(chuàng)意動畫進(jìn)行分析。

為何要使用自定義 TabBar 效果呢？在頁面的抽屜動畫、TabBar 組件、添加圖像素材按鈕的多種要求下，我們只能選擇使用自定義 TabBar 動畫了。

基礎(chǔ)知識

默認(rèn) TarBar

Tabbar^[1] 在 app.json 中配置，作用范圍為 TabBar 頁，常駐頁面最底部，占據(jù)頁面高度 50px，有 iPhone x 全面屏適配。

tabBar:?{
??custom:?true,
??backgroundColor:?'#DEE8FF',
??borderStyle:?'white',
??color:?'#95a1af',
??selectedColor:?'#2f5aff',
??list:?[
????{
??????pagePath:?'pages/theme-list/theme-list',
??????text:?'主題',
??????iconPath:?'images/tab-theme-1.png',
??????selectedIconPath:?'images/tab-theme-2.png'
????},
??]
}

下圖為小溪里參與維護(hù)的 CCtalk 出品的“打卡鴨”小程序。

全局自定義 TarBar

自定義 tabBar^[2]可以讓開發(fā)者更加靈活地設(shè)置 tabBar 樣式，以滿足更多個性化的場景。

在自定義 tabBar 模式下

• 為了保證低版本兼容以及區(qū)分哪些頁面是 tab 頁，tabBar 的相關(guān)配置項需完整聲明，但這些字段不會作用于自定義 tabBar 的渲染。
• 此時需要開發(fā)者提供一個自定義組件來渲染 tabBar，所有 tabBar 的樣式都由該自定義組件渲染。推薦用 fixed 在底部的 cover-view + cover-image 組件渲染樣式，以保證 tabBar 層級相對較高。
• 與 tabBar 樣式相關(guān)的接口，如 wx.setTabBarItem 等將失效
• 每個 tab 頁下的自定義 tabBar 組件實例是不同的，可通過自定義組件下的 getTabBar 接口，獲取當(dāng)前頁面的自定義 tabBar 組件實例。

簡單來說：

• 使用 CSS fixed 將 Tabbar 固定到底部，需要做 iPhone x 全面屏適配
• 在切換頁面（onShow）后，設(shè)置當(dāng)前高亮的 TabItem

注意：如需實現(xiàn) tab 選中態(tài)，要在當(dāng)前頁面下，通過 getTabBar 接口獲取組件實例，并調(diào)用 setData 更新選中態(tài)。

show()?{
??if?(typeof?this.getTabBar?===?'function'?&&?this.getTabBar())?{
????this.getTabBar().setData({
??????selected:?1
????})
??}
}

以下為全局自定義 TabBar 的幾篇文章：

• 小程序自定義底部導(dǎo)航欄組件^[3]
• Taro 3.x 設(shè)置自定義 TabBar^[4]
• 基于 Taro 封裝微信小程序的 tabBar^[5]
• taro 中自定義 tabbar 實現(xiàn)中間圖標(biāo)凸出效果^[6]

頁面單獨調(diào)用自定義 TabBar

每個頁面調(diào)用 TabBar，頁面內(nèi)控制組件更加靈活。

這種方式可以視為每個 TabBar 都單獨調(diào)用了 TabBar 組件。

??selected={tabBarIndex}
??hideIndex={tabBarIndex?===?1?&&?!isShowShape???1?:?-1}
/>

動畫調(diào)研

抽屜動畫演示

在移動端 UI 中漢堡包菜單配合抽屜式彈出動畫是很常見的交互動效之一。首先，我們來看幾個比較經(jīng)典的動畫效果：

氣泡動畫參考

氣泡動畫的核心點為，幾個子按鈕按照圓心分布，彈出有先后。

https://codepen.io/0guzhan/pen/YvNmwJ

抽屜式動畫抽屜式動畫要點為

• 頁面容器內(nèi)有菜單和頁面主內(nèi)容兩個子容器
• 帶回彈效果的交互動畫會更有趣

https://codepen.io/andrejsharapov/pen/jJXEGq

https://codepen.io/tylerfowle/pen/vEqXMV

通過對上面抽屜動畫所對應(yīng)頁面布局進(jìn)行分析，我們可以發(fā)現(xiàn)，TabBar 組件只能放在當(dāng)前頁面中,作為“主要頁面內(nèi)容”模塊被縮小。

底部 TabBar 動畫

通過對國內(nèi)常見的幾十款 APP 進(jìn)行分析，我們可以得出以下幾個特點

1. 大部分 APP 的 TabBar 的交互動畫中除了有類似小程序那樣的幾個頁面 TabBar 外，都會有“+”號或者“?”的主按鈕
2. 在 TabBar 上 都會有一些微動畫，比如愛奇藝 APP 上的氣泡動畫和京東 APP 上的圖標(biāo)轉(zhuǎn)場動畫。

愛奇藝	京東
1）氣泡動畫 2）粘連動畫	Icon 高亮動畫

視頻演示：https://v.qq.com/x/page/k3161mu12nw.html

動畫試驗

動畫 1——粘連菜單

下方動畫基于?CSS filter?濾鏡與?SVG?高斯模糊實現(xiàn)，在 web 端上沒有問題，但在真機(jī)上小程序上不支持。

效果源碼：https://codepen.io/siseer/pen/MBameP

這篇《微信小程序 CSS filter（濾鏡）的使用示例^[7]》講了大部分 CSS 濾鏡效果，但都是基于微信開發(fā)者工具的，在真機(jī)上只有 filter(abc.svg#goo) 的這個不支持。

知識點補(bǔ)充

《粘連效果實現(xiàn)^[8]》 對應(yīng)的示例：https://codepen.io/leevare/pen/yxxMMq

動畫 2——SVG 路徑

既然黏連動畫在小程序上無法實現(xiàn)，我就嘗試換成了 SVG 路徑來實現(xiàn)動畫。那為何不使用 CSS 圓角矩形呢？因為圓弧與直線的連接處要做“過渡”效果的。

效果源碼：https://codepen.io/ainalem/pen/KBvOWV

Hi 頭像動畫簡述

視頻演示：https://v.qq.com/x/page/c3161x3vo8v.html

Tab 頁切換動畫

（具體效果情況請看上面的視頻）

Tab 頁切換有兩種實現(xiàn)思路：

• 分為多個有頁面實體的 Tab 頁
• 在頁面切換后，需要重新產(chǎn)生 TabBar 組件實例
• 切換動畫不夠理想，但頁面邏輯完全獨立
• 在一個實體頁面內(nèi)
• 用 Tabs 組件包含多個 Tab 子頁面（組件）
• 幾個組件的邏輯相對獨立，切換動畫會更好

特別說明，Hi 頭像的 TabBar并非使用 fixed 布局，而是用了頁面 100% 高度配合 flex 布局，具體可以看 https://face.xiaoxili.com。

//?示意源碼
import?Taro?from?'@tarojs/taro'
import?{?View,?Image?}?from?'@tarojs/components'
import?{?isIphoneSafeArea?}?from?'utils/common'
import?'./styles.styl'

const?IS_IPHONEX?=?isIphoneSafeArea()

export?default?class?CustomTabBar?extends?Taro.Component?{
??...

??static?defaultProps?=?{
????selected:?-1,
????hideIndex:?-1
??}

??constructor(props)?{
????super(props)
????this.state?=?{
??????list:?[
????????{
??????????pagePath:?'/pages/theme-list/theme-list',
??????????text:?'主題',
??????????iconPath:??Taro.getEnv()?===?'WEB'???require('../../images/tab-theme-1.png')?:?'../../images/tab-theme-1.png',
??????????selectedIconPath:??Taro.getEnv()?===?'WEB'???require('../../images/tab-theme-2.png')?:?'../../images/tab-theme-2.png',
????????}
??????]
????}
??}

??switchTab?=?(e)?=>?{
????const?data?=?e.currentTarget.dataset
????const?url?=?data.path
????Taro.switchTab({?url?})
??}
??render()?{
????const?{?selected,?hideIndex?}?=?this.props
????const?{?list?}?=?this.state
????return?(
??????<View?className={`tab-bar?${IS_IPHONEX???'bottom-safe-area'?:?''}?${hideIndex?===?selected???'tab-bar-hide'?:?''}`}>
????????{
??????????list.map((item,?index)?=>?{
????????????const?{?pagePath,?selectedIconPath,?iconPath,?text?}?=?item
????????????return?(
??????????????<View?key={text}?hoverClass='tab-bar-item-hover'?className={`tab-bar-item?${selected?===?index???'tab-item-active'?:?''}`}?data-path={pagePath}?data-index={index}?onClick={this.switchTab}>
????????????????<Image?className="tab-bar-image"?src={''?+?(selected?===?index???selectedIconPath?:?iconPath)}>Image>
????????????????<View?className="tab-bar-text">{text}View>
??????????????View>
????????????)
??????????})
????????}
??????View>
????)
??}
}

TabBar 源碼地址：https://github.com/hi-our/hi-face/tree/master/taro/src/components/custom-tab-bar

按鈕彈出動畫

（具體效果情況請看上面的視頻）

在 v2 版 Hi 頭像里，添加頭像素材的按鈕是在 TabBar 組件中“加號”中彈出，其中關(guān)鍵點為“同心圓布局”和“動畫延遲”。

視頻地址：https://v.qq.com/x/page/z3161kzeiwx.html

同圓心布局是按照圓心進(jìn)行布局的，比計算 X 軸 和 Y 軸的偏移量更方便更準(zhǔn)確transform: rotate(-60deg) translateY(-85px) rotate(60deg);

動畫延遲，多個按鈕菜單項所對應(yīng)的動畫在執(zhí)行時需要加上動畫延遲transition-delay: 0.1s;

按鈕菜單源碼：https://github.com/hi-our/hi-face/blob/master/taro/src/pages/avatar-edit/components/menu-choose/index.js

抽屜式動畫

在抽屜式動畫中，抽屜菜單和頁面容器的動畫參數(shù)是核心，可以有一點回彈效果

.menu-main?{
??transition:?0.35s?cubic-bezier(.75,.26,.02,1.01)?transform;
}

.page-container?{
??transition:?0.35s?cubic-bezier(.75,.26,.02,1.01)?transform,?0.35s?cubic-bezier(0.68,?-0.55,?0.265,?1.55)?border-radius;
}

下圖為 “cubic-bezier”的參數(shù)效果，具體細(xì)節(jié)可以訪問 https://cubic-bezier.com/#.68,-0.04,.26,1.55

.menu-item:nth-child(1)?{
????transition-delay:?0.1s;
????transform:?rotate(-60deg)?translateY(-85px)?rotate(60deg);
}
.menu-item:nth-child(2)?{
????transition-delay:?0.18s;
????transform:?rotate(-20deg)?translateY(-85px)?rotate(20deg);
}

抽屜動畫源碼：https://github.com/hi-our/hi-face/blob/master/taro/src/pages/avatar-edit/components/menu-main/index.js

補(bǔ)充信息

PPT 演示

https://www.xiaoxili.com/slides/5-minapp-tabbar/

視頻課程

為了讓大家更好地了解我的動畫效果，后續(xù)會有一節(jié) Hi 頭像 UI 交互的分享課。

關(guān)于 Hi 頭像開源項目

Hi 頭像，讓頭像有趣一點

• Web體驗版：https://face.xiaoxili.com
• 源碼：https://github.com/hi-our/hi-face
• 部署文檔：https://github.com/hi-our/hi-face/blob/master/DEPLOYMENT.md
• 云開發(fā)技術(shù)小冊：https://www.xiaoxili.com/hi-face/docs/README.html

參考資料