Вторая часть здесь - о том, как анимировать фон панели инструментов.
В прошлый раз мы говорили о том, как создать эффект ряби с помощью Animated API в React Native. Был только один Анимированный Просмотр. Сегодня мы поговорим об анимации панели инструментов Material Design. Как вы можете видеть на картинке выше, нам нужно анимировать пару Views вместе.
Мы разработаем компоненты и анимируем текст и значки. Будет еще одна статья, описывающая фоновую анимацию.
Вы также можете проверить библиотеку react-native-material-ui, которая уже реализует компонент Toolbar. Использую его для приложения системы бронирования от Reservio.
Идея
Мы реализуем LeftElement, CenterElement и RightElement. Затем у нас будет Toolbar в качестве оболочки для этих трех компонентов. . Понятно, что есть два возможных состояния. Режим поиска либо активен, либо неактивен. Итак, мы будем анимировать переход между ними.
Мы будем вращать LeftElement и анимировать непрозрачность CenterElement. Нам нужно, чтобы оба компонента были повторно отрисованы во время анимации. LeftElement выполняет повторный рендеринг от значка меню к значку стрелки. CenterElement выполняет повторный рендеринг из компонента Text в компонент TextInput.
Давайте код
Прежде всего, нам нужно создать простой статический View. Ни состояния, ни анимации.
Компоненты LeftElement и RightElement почти одинаковы. Обратите внимание, что компонент IconToggle включен в библиотеку react-native-material-ui. Вы также можете проверить первую статью в React Native Motion, если вам интересно, как это работает.
Компонент CenterElement также довольно прост.
Добавим состояние
Мы должны добавить состояние на панель инструментов, которая будет управлять анимацией. Мы уже можем использовать его для поиска, но мы хотим, чтобы он был более крутым, не так ли?
После нажатия правого значка мы устанавливаем для isSearchActive значение true и передаем его всем компонентам через свойства. Затем мы должны передать значение TextInput в RightElement и показать кнопку очистки, если это необходимо. Вот код для правого значка. Аналогичным образом можно изменить левый значок.
Давайте оживим
Начнем с левого значка, который вращается и меняется с menu на стрелку. Затем мы анимируем непрозрачность заголовка. Правый значок останется без анимации. Иногда лучше ничего не делать.
Левый элемент
Начинаем поворачивать иконку меню на 90 градусов. Затем мы устанавливаем leftElement на стрелку. Он вызывает повторную визуализацию компонента и отображает стрелку вместо меню. Затем мы можем повернуть значок стрелки от 90 до 180 градусов. Было бы лучше иметь здесь что-то вроде микро-анимации, но это не цель данной статьи. Может в следующий раз?
Анимация начинается в componentWillReceiveProps, где мы проверяем isSearchActive в свойствах. Нам нужно знать, анимируем ли мы от нуля до 180 градусов или от 180 до нуля.
Полезно знать о функции Animated interpolate (строка 40), которая сопоставляет значение с другим значением. В данном случае от числа к градусу.
Центральный элемент
Аналогичным образом меняем CenterElement. Нам нужно установить состояние в половине анимации.
Мы анимируем непрозрачность от 1 до нуля. Затем мы устанавливаем для state.textInput значение true. Он вызывает повторную визуализацию и отображает компонент TextInput вместо Text. Обратите внимание, что для opacity все еще установлено нулевое значение. Итак, нам нужно снова оживить непрозрачность. От нуля до 1.
На этом пока все. Все готово для реализации фоновой анимации.
Вторая часть здесь - о том, как анимировать фон панели инструментов.
Последнее слово
Если вам понравилась эта статья, поделитесь ею. Вы также можете следить за публикацией React Native Motion, которую я публикую. Если у вас есть идея для другой анимации, оставьте, пожалуйста, комментарий.
Обратите внимание, что код не готов к производству. Для этого вы можете использовать библиотеку с открытым исходным кодом react-native-material-ui. Использую его для приложения системы бронирования от Reservio.
