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

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

基礎(chǔ)知識

默認(rèn) TarBar

Tabbar 在 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'
    },
  ]
}
復(fù)制代碼

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

全局自定義 TarBar

自定義 tabBar可以讓開發(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
    })
  }
}
復(fù)制代碼

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

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

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

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

<CustomTabBar
  selected={tabBarIndex}
  hideIndex={tabBarIndex === 1 && !isShowShape ? 1 : -1}
/>
復(fù)制代碼

動畫調(diào)研

抽屜動畫演示

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

氣泡動畫參考

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

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

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

codepen.io/tylerfowle/…

通過對上面抽屜動畫所對應(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 端上沒有問題，但在真機上小程序上不支持。

動畫 2——SVG 路徑

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

效果源碼： codepen.io/ainalem/pen…

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 布局，具體可以看 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 = http://www.wxapp-union.com/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>
    )
  }
}
復(fù)制代碼

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;
}
復(fù)制代碼

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

.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);
}
復(fù)制代碼