小程序 TabBar 创意动画

Introduction

Hi 头像最近进行了 v2 版大改版，其中的交互动画得到了不少好友的称赞。今天我就来分享一些关于小程序 TabBar 创意动画，将从 TabBar 类型、完整的 TabBar 创意动画进行分析。

为何要使用自定义 TabBar 效果呢？在页面的抽屉动画、TabBar 组件、添加图像素材按钮的多种要求下，我们只能选择使用自定义 TabBar 动画了。

Link to this heading
基础知识

Link to this heading
默认 TarBar

Tabbar 在 app.json 中配置，作用范围为 TabBar 页，常驻页面最底部，占据页面高度 50px，有 iPhone x 全面屏适配。

下图为小溪里参与维护的 CCtalk 出品的“打卡鸭”小程序。

Link to this heading
全局自定义 TarBar

自定义 tabBar可以让开发者更加灵活地设置 tabBar 样式，以满足更多个性化的场景。

简单来说：

使用 CSS fixed 将 Tabbar 固定到底部，需要做 iPhone x 全面屏适配
在切换页面（onShow）后，设置当前高亮的 TabItem

注意：如需实现 tab 选中态，要在当前页面下，通过 getTabBar 接口获取组件实例，并调用 setData 更新选中态。

以下为全局自定义 TabBar 的几篇文章：

Link to this heading
页面单独调用自定义 TabBar

每个页面调用 TabBar，页面内控制组件更加灵活。

这种方式可以视为每个 TabBar 都单独调用了 TabBar 组件。

Link to this heading
动画调研

Link to this heading
抽屉动画演示

在移动端 UI 中汉堡包菜单配合抽屉式弹出动画是很常见的交互动效之一。首先，我们来看几个比较经典的动画效果：

气泡动画参考

气泡动画的核心点为，几个子按钮按照圆心分布，弹出有先后。

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

抽屉式动画 抽屉式动画要点为

页面容器内有菜单和页面主内容两个子容器
带回弹效果的交互动画会更有趣

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

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

通过对上面抽屉动画所对应页面布局进行分析，我们可以发现，TabBar 组件只能放在当前页面中,作为“主要页面内容”模块被缩小。

Link to this heading
底部 TabBar 动画

通过对国内常见的几十款 APP 进行分析，我们可以得出以下几个特点

大部分 APP 的 TabBar 的交互动画中除了有类似小程序那样的几个页面 TabBar 外，都会有“+”号或者“▶”的主按钮
在 TabBar 上都会有一些微动画，比如爱奇艺 APP 上的气泡动画和京东 APP 上的图标转场动画。

爱奇艺	京东
1）气泡动画 2）粘连动画	Icon 高亮动画

视频演示：https://v.qq.com/x/page/k3161mu12nw.html

Link to this heading
动画试验

Link to this heading
动画 1——粘连菜单

下方动画基于 CSS filter 滤镜与 SVG 高斯模糊实现，在 web 端上没有问题，但在真机上小程序上不支持。

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

这篇《微信小程序 CSS filter（滤镜）的使用示例》讲了大部分 CSS 滤镜效果，但都是基于微信开发者工具的，在真机上只有 filter(abc.svg#goo) 的这个不支持。

知识点补充

《粘连效果实现》对应的示例： https://codepen.io/leevare/pen/yxxMMq

Link to this heading
动画 2——SVG 路径

既然黏连动画在小程序上无法实现，我就尝试换成了 SVG 路径来实现动画。那为何不使用 CSS 圆角矩形呢？因为圆弧与直线的连接处要做“过渡”效果的。

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

Link to this heading
Hi 头像动画简述

视频演示：https://v.qq.com/x/page/c3161x3vo8v.html

Link to this heading
Tab 页切换动画

（具体效果情况请看上面的视频）

Tab 页切换有两种实现思路：

分为多个有页面实体的 Tab 页
- 在页面切换后，需要重新产生 TabBar 组件实例
- 切换动画不够理想，但页面逻辑完全独立
在一个实体页面内
- 用 Tabs 组件包含多个 Tab 子页面（组件）
- 几个组件的逻辑相对独立，切换动画会更好

特别说明，Hi 头像的 TabBar并非使用 fixed 布局，而是用了页面 100% 高度配合 flex 布局，具体可以看 https://face.xiaoxili.com。

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

Link to this heading
按钮弹出动画

（具体效果情况请看上面的视频）

在 v2 版 Hi 头像里，添加头像素材的按钮是在 TabBar 组件中“加号”中弹出，其中关键点为“同心圆布局”和“动画延迟”。

视频地址：https://v.qq.com/x/page/z3161kzeiwx.html

同圆心布局是按照圆心进行布局的，比计算 X 轴和 Y 轴的偏移量更方便更准确 transform: rotate(-60deg) translateY(-85px) rotate(60deg); 动画延迟，多个按钮菜单项所对应的动画在执行时需要加上动画延迟 transition-delay: 0.1s;

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