Аватар Hi претерпел серьезную доработку версии v2 в августе и сентябре, и интерактивная анимация в нем получила высокую оценку многих друзей. Сегодня я поделюсь некоторыми творческими анимациями о Mini Program TabBar, которые будут проанализированы на основе типа TabBar и полной творческой анимации TabBar.
Зачем использовать собственный эффект TabBar? В соответствии с различными требованиями к анимации ящика страницы, компоненту TabBar и добавлению кнопок материала изображения мы можем выбрать только использование пользовательской анимации TabBar.
Базовые знания
TarBar по умолчанию
Tabbarсуществуетapp.jsonСредняя конфигурация, сфера действия — страница 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'
},
]
}
На рисунке ниже показан апплет Punch Duck, созданный CCtalk, в обслуживании которого участвовал Xiaoxili.
Глобальная настройка TarBar
пользовательская панель вкладокЭто позволяет разработчикам более гибко настраивать стиль tabBar, чтобы соответствовать более персонализированным сценариям.
в пользовательском режиме tabBar
- Чтобы обеспечить совместимость с более ранними версиями и определить, какие страницы являются вкладками, необходимо полностью объявить соответствующие элементы конфигурации tabBar, но эти поля не повлияют на отрисовку пользовательского tabBar.
- В настоящее время разработчику необходимо предоставить настраиваемый компонент для рендеринга tabBar, и все стили tabBar рендерятся настраиваемым компонентом. Рекомендуется использовать фиксированный в нижней части
cover-view+cover-imageСтили рендеринга компонентов, чтобы поддерживать относительно высокий уровень tabBar.- Интерфейс, связанный со стилем Tabbar, например
wx.setTabBarItemистечет- Пользовательский экземпляр компонента tabBar под каждой вкладкойотличается и может быть доступен через пользовательские компоненты в
getTabBarИнтерфейс для настройки текущей страницыtabBarЭкземпляр компонента.
Проще говоря:
- Используйте исправленный CSS, чтобы зафиксировать Tabbar внизу, необходимо сделать полноэкранную адаптацию iPhone x
- После переключения страниц (onShow) установите текущую выделенную
TabItem
Примечание. Чтобы достичь состояния выбора вкладки, на текущей странице передайтеgetTabBarИнтерфейс получает экземпляр компонента и вызываетsetDataОбновите выбранное состояние.
show() {
if (typeof this.getTabBar === 'function' && this.getTabBar()) {
this.getTabBar().setData({
selected: 1
})
}
}
Ниже приведены несколько статей о глобальной настройке TabBar:
- Мини-программа Пользовательский компонент нижней панели навигации
- Taro 3.x установить пользовательский TabBar
- TabBar на основе апплета WeChat, упакованного Taro
- Настройте панель вкладок в таро, чтобы добиться эффекта выступающего среднего значка.
Страница вызывает пользовательский TabBar отдельно
Каждая страница вызывает TabBar, а компоненты управления на странице более гибкие.
Таким образом, можно считать, что каждый TabBar вызывает компонент TabBar индивидуально.
<CustomTabBar
selected={tabBarIndex}
hideIndex={tabBarIndex === 1 && !isShowShape ? 1 : -1}
/>
анимационные исследования
Анимация ящика
В пользовательском интерфейсе мобильного терминала меню китайского гамбургера с всплывающей анимацией ящика является одним из распространенных взаимодействий. Во-первых, давайте посмотрим на несколько классических анимационных эффектов:
Справочник по пузырьковой анимации
Суть пузырьковой анимации заключается в том, что несколько подкнопок распределяются в соответствии с центром круга и появляются последовательно.
code spray.IO/0 разделяет аккаунт на/spray…
Анимация ящикаТочки анимации ящика
- Контейнер страницы имеет два подконтейнера: меню и основное содержимое страницы.
- Интерактивная анимация с эффектом отскока будет интереснее
код спрей.IO/Андрей убивает...
код спрей.IO/Тайлер Будда для/…
Анализируя макет страницы, соответствующий приведенной выше анимации ящика, мы можем обнаружить, что компонент TabBar может быть размещен только на текущей странице и уменьшен как модуль «контента главной страницы».
Анимация нижней панели вкладок
Анализируя десятки распространенных приложений в Китае, мы можем выделить следующие характеристики.
- В интерактивной анимации TabBar большинства приложений, в дополнение к нескольким страницам TabBar, таким как апплет, будет значок «+» или главная кнопка «▶».
- На вкладке TabBar будут некоторые микроанимации, такие как анимация пузырьков в приложении iQiyi и анимация перехода между значками в приложении Jingdong.
| ИКИИ | Цзиндон |
|---|---|
| 1) Пузырьковая анимация 2) Склеить анимацию |
Анимация выделения значков |
Видео Demo:V.QQ.com/small/afraid/ke316…
анимационный эксперимент
Анимация 1 - Меню клея
Анимация ниже основана наCSS filterфильтр иSVGРазмытие по Гауссу реализовано, на веб стороне проблем нет, но на апплете на реальной машине не поддерживается.
Исходный код эффекта:код спрей.IO/четыре цвета и/спрей/…
Этот "Пример использования CSS-фильтра апплета WeChat》 говорит о большинстве эффектов фильтров CSS, но все они основаны на инструментах разработчика WeChat и только на реальной машине.
filter(abc.svg#goo)этого не поддерживается.
Дополнительные очки знаний
"Эффект адгезии достигнут》 Соответствующий пример:код спрей.IO/Eva Re/спрей…
Анимация 2 — пути SVG
Поскольку липкую анимацию нельзя реализовать в апплете, я попытался заменить путь SVG, чтобы получить анимацию. Так почему бы не использовать скругленные прямоугольники CSS? Потому что связь между дугой и прямой имеет эффект «перехода».
Исходный код эффекта:код спрей.IO/Айне скучно/спрей...
Привет краткая анимация аватара
Демонстрация видео:V.QQ.com/small/afraid/from 316…
Анимация переключения страниц вкладок
(Подробности смотрите в видео выше)
Есть две идеи реализации переключения вкладок:
- Разделить на несколько вкладок с объектами страницы
- После переключения страниц вам необходимо повторно сгенерировать экземпляр компонента TabBar.
- Анимация переключения не идеальна, но логика страницы полностью независима
- на странице объекта
- Используйте компонент «Вкладки», чтобы включить несколько подстраниц вкладок (компонентов).
- Логика нескольких компонентов относительно независима, и анимация переключения будет лучше
Особое примечание, привет аватараTabBarВместо использования фиксированного макета для соответствия гибкому макету используется 100 % высоты страницы.лицо.xili.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:GitHub.com/Привет-авария/Привет-пост…
всплывающая анимация кнопки
(Подробности смотрите в видео выше)
В версии Hi avatar v2 кнопка добавления материала для аватара появляется в «знаке плюса» в компоненте TabBar, а ключевыми моментами являются «макет концентрического круга» и «задержка анимации».
Адрес видео:V.QQ.com/small/afraid/at 316…
Концентрическая планировкаРазложен по центру окружности, что удобнее и точнее, чем вычисление смещения оси X и оси Ytransform: rotate(-60deg) translateY(-85px) rotate(60deg);
задержка анимации, анимация, соответствующая нескольким элементам меню кнопки, должна добавлять задержку анимации при выполненииtransition-delay: 0.1s;
Исходный код меню кнопок:GitHub.com/Привет-авария/Привет-пост…
Анимация ящика
В анимации ящика параметры анимации меню ящика и контейнера страницы являются ядром, что может иметь небольшой эффект отскока.
.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;
}
На следующем рисунке показан эффект параметра «кубический Безье», подробности доступны.cube-whitemoth.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);
}
Исходный код анимации ящика:GitHub.com/Привет-авария/Привет-пост…
Дополнительная информация
Презентация РРТ
О проекте Hi Avatar с открытым исходным кодом
Привет аватарка сделай аватарку интересной
- Версия веб-опыта:face.xiaoxili.com
- Исходный код:GitHub.com/Привет-авария/Привет-пост…