Hi avatar in August and September v2 version of the overhaul, which interactive animation has been praised by many friends. Today, I’m going to share a little bit about TabBar creative animation, from the TabBar type, complete TabBar creative animation analysis.

Why use custom TabBar effects? With drawer animations on the page, TabBar components, and add image material buttons, the only option was to use custom TabBar animations.

Basic knowledge of

The default TarBar

The Tabbar is configured in app.json. The Tabbar page resides at the bottom of the page and occupies 50px of the page height.

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

Below is the stream to participate in the maintenance of CCtalk produced “punch duck” small program.

Global custom TarBar

Custom Tabbars give developers more flexibility in setting tabBar styles to suit more personalized scenarios.

In custom tabBar mode

  • To ensure compatibility with earlier versions and to distinguish which pages are TAB pages, the tabBar configuration items need to be fully declared, but these fields do not apply to the rendering of custom Tabbars.
  • In this case, the developer needs to provide a custom component to render the tabBar. All tabBar styles are rendered by this custom component. Recommended to use fixed at the bottomcover-view + cover-imageComponent rendering styles to ensure that the tabBar is relatively high level.
  • Interfaces associated with the tabBar style, such aswx.setTabBarItemSuch as will fail
  • Custom tabBar component instances under each TAB pageIs different and can be defined by the component belowgetTabBarInterface to get the customizations for the current pagetabBarComponent instance.

In short:

  • Using CSS Fixed to fix the Tabbar to the bottom requires full screen adaptation for the iPhone X
  • After switching the page (onShow), set the currently highlightedTabItem

Note: If you want to achieve TAB selected state, you must pass under the current pagegetTabBarInterface gets the component instance and callssetDataUpdate the selected state.

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

Here are a few articles on global custom Tabbars:

  • Applet customizes the bottom navigation bar component
  • X Sets a custom TabBar
  • TabBar based on Taro encapsulation wechat applet
  • Customize tabbar in Taro to achieve the middle icon bulge effect

The page calls the custom TabBar separately

The TabBar is invoked on each page, making the in-page control component more flexible.

In this way, each TabBar invokes the TabBar component separately.

<CustomTabBar
  selected={tabBarIndex}
  hideIndex={tabBarIndex === 1 && !isShowShape ? 1 : -1} / >Copy the code

Animation research

Drawer animation

In mobile UI, hamburger menu with drawer-style pop-up animation is one of the most common interactive effects. First, let’s look at some classic animation effects:

Bubble Animation Reference

The core point of bubble animation is. Several sub-buttons are distributed according to the center of the circle and pop up successively.

Codepen. IO / 0 guzhan/pen…

Drawer animation Drawer animation points as

  • The page container has two subcontainers, the menu and the main page content
  • Interactive animations with rebound effects are more interesting

Codepen. IO/andrejshara…

Codepen. IO/tylerfowle /…

By analyzing the page layout for the top drawer animation, we can see that the TabBar component can only be placed in the current page, as the “main page content” module is narrowed down.

Bottom TabBar animation

Through the analysis of dozens of common apps in China, we can draw the following characteristics

  1. Most apps have a “+” or “▶” home button in addition to a few page Tabbars like a small program
  2. There are micro-animations on the TabBar, such as bubble animation on the IQiyi APP and icon transition animation on the JD.com APP.
iQIYI jingdong
1) Bubble animation

2) Adhesion animation		 Icon highlight animation

Video demo: v.qq.com/x/page/k316…

Animation test

Animation 1 — Adhesion menu

The animation below is based on THE CSS Filter filter and SVG Gaussian blur implementation, no problem on the Web side, but on the real machine small program does not support.

IO /siseer/pen/…

This “micro channel small program CSS filter(filter) use example” talk about most of the CSS filter effect, but are based on the micro channel developer tools, in the real machine only filter(ABC. Svg# goo) this does not support.

Knowledge supplement

Codepen. IO /leevare/ Pen…

Animation 2 — SVG path

Since sticky animation is not available on small programs, I tried to implement animation using SVG paths instead. So why not use CSS rounded rectangles? Because the connection of the arc and the straight line to do the “transition” effect.

IO /ainalem/pen…

Hi avatar animation brief

Video demo: v.qq.com/x/page/c316…

Tab page switch animation

(See the video above for details)

There are two ways to achieve Tab switching:

  • Tab pages divided into multiple page entities
    • After the page switch, the TabBar component instance needs to be recreated
    • Switching animation is not ideal, but the page logic is completely independent
  • Inside an entity page
    • Include multiple Tab child pages with a Tab component (component)
    • The logic of several components is relatively independent, and switching animations is better

In particular, the Hi profile picture TabBar does not use fixed layout, but uses the page 100% height with flex layout, see face.xiaoxili.com for details.

// Show the source code
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: 'theme'.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-barThe ${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-itemThe ${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>)}}Copy the code

TabBar source address: github.com/hi-our/hi-f…

Button popup animation

(See the video above for details)

In the Hi avatar v2 version, the button to add the avatar material pops up in the TabBar component under the “plus sign”, where the key points are “concentric circle layout” and “Animation delay”.

Video address: v.qq.com/x/page/z316…

Transform: Rotate (-60deg) translateY(-85px) rotate(-60deg) rotate(-85px) rotate(-60deg); Transition delay: 0.1s; transition delay: 0.1s;

Button menu source: github.com/hi-our/hi-f…

Drawer style animation

In drawer style animation, drawer menu and page container animation parameters are the core, can have a little rebound effect

.menu-main {
  transition: 0.35 s cubic-bezier(.75.26.02.1.01) transform;
}

.page-container {
  transition: 0.35 s cubic-bezier(.75.26.02.1.01) transform, 0.35 s cubic-bezier(0.68, -0.55.0.265.1.55) border-radius;
}
Copy the code

The following figure shows the parameters of “Cubic – Bezier”. For details, please visit cubic-bezier.com/#.68,-0.04,…

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

Drawer animation source: github.com/hi-our/hi-f…

Supplementary information

PPT presentation

www.xiaoxili.com/slides/5-mi…

About Hi Avatar open source project

Hi head, make your head interesting

  • Web Experience version: face.xiaoxili.com
  • Source: github.com/hi-our/hi-f…