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

發表時間：2021-1-6

發布人：葵宇科技

浏覽次數：97

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

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

基礎知識

默認 TarBar

Tabbar 在 app.json 中(zhōng)配置，作用範圍為 TabBar 頁，常駐頁面最底部，占據頁面高度 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'
    },
  ]
}
複制代碼

下(xià)圖為小溪裡參與維護的 CCtalk 出品的“打卡鴨”小程序。

全局自定義 TarBar

自定義 tabBar可(kě)以讓開發者更加靈活地設置 tabBar 樣式，以滿足更多個(gè)性化的場景。

在自定義 tabBar 模式下(xià)

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

簡單來說：

使用 CSS fixed 将 Tabbar 固定到底部，需要做 iPhone x 全面屏适配
在切換頁面（onShow）後，設置當前高亮(liàng)的 TabItem

注意：如(rú)需實現 tab 選中(zhōng)态，要在當前頁面下(xià)，通(tōng)過 getTabBar 接口獲取組件實例，并調用 setData 更新選中(zhōng)态。

show() {
  if (typeof this.getTabBar === 'function' && this.getTabBar()) {
    this.getTabBar().setData({
      selected: 1
    })
  }
}
複制代碼

以下(xià)為全局自定義 TabBar 的幾篇文(wén)章：

頁面單獨調用自定義 TabBar

每個(gè)頁面調用 TabBar，頁面内控制組件更加靈活。

這種方式可(kě)以視為每個(gè) TabBar 都單獨調用了 TabBar 組件。

<CustomTabBar
  selected={tabBarIndex}
  hideIndex={tabBarIndex === 1 && !isShowShape ? 1 : -1}
/>
複制代碼

動(dòng)畫調研

抽屜動(dòng)畫演示

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

氣泡動(dòng)畫參考

氣泡動(dòng)畫的核心點為，幾個(gè)子(zǐ)按鈕按照圓心分布，彈出有先後。

抽屜式動(dòng)畫 抽屜式動(dòng)畫要點為

頁面容器(qì)内有菜單和(hé)頁面主内容兩個(gè)子(zǐ)容器(qì)
帶回彈效果的交互動(dòng)畫會更有趣

codepen.io/tylerfowle/…

通(tōng)過對上面抽屜動(dòng)畫所對應頁面布局進行分析，我們可(kě)以發現，TabBar 組件隻能放在當前頁面中(zhōng),作為“主要頁面内容”模塊被縮小。

底部 TabBar 動(dòng)畫

通(tōng)過對國内常見的幾十款 APP 進行分析，我們可(kě)以得出以下(xià)幾個(gè)特點

大部分 APP 的 TabBar 的交互動(dòng)畫中(zhōng)除了有類似小程序那樣的幾個(gè)頁面 TabBar 外，都會有“+”号或者“?”的主按鈕
在 TabBar 上都會有一些微動(dòng)畫，比如(rú)愛奇藝 APP 上的氣泡動(dòng)畫和(hé)京東 APP 上的圖标轉場動(dòng)畫。

愛奇藝	京東
1）氣泡動(dòng)畫 2）粘連動(dòng)畫	Icon 高亮(liàng)動(dòng)畫

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

動(dòng)畫試驗

動(dòng)畫 1——粘連菜單

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

動(dòng)畫 2——SVG 路(lù)徑

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

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

Hi 頭像動(dòng)畫簡述

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

Tab 頁切換動(dòng)畫

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

Tab 頁切換有兩種實現思路(lù)：

分為多個(gè)有頁面實體的 Tab 頁
- 在頁面切換後，需要重新産生 TabBar 組件實例
- 切換動(dòng)畫不夠理想，但頁面邏輯完全獨立
在一個(gè)實體頁面内
- 用 Tabs 組件包含多個(gè) Tab 子(zǐ)頁面（組件）
- 幾個(gè)組件的邏輯相對獨立，切換動(dòng)畫會更好

特别說明，Hi 頭像的 TabBar并非使用 fixed 布局，而是用了頁面 100% 高度配合 flex 布局，具體可(kě)以看 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>
    )
  }
}
複制代碼

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

按鈕彈出動(dòng)畫

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

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

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

同圓心布局是按照圓心進行布局的，比計算 X 軸和(hé) Y 軸的偏移量更方便更準确 transform: rotate(-60deg) translateY(-85px) rotate(60deg); 動(dòng)畫延遲，多個(gè)按鈕菜單項所對應的動(dòng)畫在執行時需要加上動(dòng)畫延遲 transition-delay: 0.1s;

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

抽屜式動(dòng)畫

在抽屜式動(dòng)畫中(zhōng)，抽屜菜單和(hé)頁面容器(qì)的動(dòng)畫參數是核心，可(kě)以有一點回彈效果

.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;
}
複制代碼

下(xià)圖為 “cubic-bezier”的參數效果，具體細節可(kě)以訪問(wèn) 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);
}
複制代碼