Учебное пособие по React Native Animation с примером является ведущей темой сегодня. Рекомендуемый способ анимации в React Native для большинства случаев — использование Animated API. Это базовое демонстрационное приложение. в котором мы перемещаем квадрат сверху вниз с анимацией. Этот пример — Kickstarter для React Native Animation, и сложные случаи будут рассмотрены в будущем. Но прямо сейчас мы начинаем наш проект с установки React Native с помощью Expo .
Если вы не знакомы с expo, то я предлагаю вам сначала проверить это руководство по Как настроить React Native с помощью Expo. Это поможет вам настроить expo, и вы начнете работать с React Native на своем физическом устройстве.
React Native — Практическое руководство
React Native Animation Учебник с примером
Теперь, если вы не хотите использовать expo, и вам нужно создать проект и протестировать его в Simulator или Emulator , то вы можете ввести следующую команду, чтобы установить React Native на Mac. Если вы используете Expo, то можете пропустить первый шаг.
# 1: Установите React Native.
Введите следующую команду.
react-native init AnimationApp
Войдите в проект.
cd AnimationApp
Теперь, чтобы открыть приложение внутри нашего iOS Simulator введите следующую команду.
react-native run-ios --simulator = "iPhone X"
# 2: Анимации с React Native.
В React Native есть два типа систем анимации.
- Анимация макета
- Анимированный
# Анимация макета
В системе Layout Animations ее легко настроить, и у нас мало контроля. Некоторые части нашего приложения также будут анимированы, намеренно мы или нет. Таким образом, нет особого контроля над всеми нашими компонентами. Поэтому мы не используем такую анимацию.
#Animated
Это сложнее настроить, но это идеально подходит для создания сложных анимаций и позволяет обрабатывать анимацию жестов. Библиотека Animated разработана, чтобы сделать анимацию плавной, мощной, простой в создании и поддержке. Animated фокусируется на декларативных отношениях между входами и выходами с настраиваемыми преобразованиями между ними и простыми методами start / stop . для управления выполнением анимации на основе времени.
Три вопроса описывают всю систему анимации.
- Где сейчас наш основной объект или элемент? Итак, это позиции X и Y в текущем сценарии.
- Куда движется элемент? Итак, место, куда нам нужно переместить наш элемент.
- Какой элемент мы собираемся переместить?
Ответы на все вышеперечисленные вопросы определяют систему анимации.
Итак, анимированный модуль состоит из трех частей.
- Значения: Текущие значения XY элемента.
- Типы: Какой тип анимации мы будет использовать такие как Spring, Timing, Decay
- Компоненты: для каких компонентов, таких как Text , Просмотр ,
# 3: Создайте квадратную анимацию.
Теперь откройте папку проекта в вашем любимом редакторе. Я рекомендую вам начать использовать VSCode , если вы еще не используете его. Для разработки на JavaScript это лучший бесплатный редактор с открытым исходным кодом.
Хорошо, теперь создайте одну папку в корне под названием components и внутри этой папки, создайте компонент с именем SquareAnimation.js и добавьте в него следующий код.
//SquareAnimation.jsimport React, { Component} из response; импорт {View, Animated} из react-native; класс SquareAnimation расширяет Component {componentWillMount () {this.position = new Animated.ValueXY (0, 0); Animated.spring (this.position, {toValue: {x: 225, y: 575}}). Start (); } render () {return ( ); }} const styles = {square: {width: 120, height: 120, backgroundColor: '# 00BCD4'}} экспортировать SquareAnimation по умолчанию;
Итак, сначала я определил View и форма этого представления — Квадрат на основе его стилей. Итак, мы перемещаем квадрат сверху вниз и смотрим, как базовая анимация работает в React Native.
В методе жизненного цикла componentWillMount () мы установили положение квадрата на 0, а затем сразу же приступаем к работе. перемещая наш объект к значениям X = 225 и Y = 575 .
Кроме того, мы обернули View с помощью Animated.View . Итак, мы можем видеть анимацию от (0, 0) до (225, 575).
Функция Animated.spring () примет первый аргумент в качестве начальной позиции, а затем принимает второй аргумент в как далеко нам нужно переместить этот объект, а затем мы вызываемся функцией start ().
Здесь мы перемещаем Square View. Итак, мы обернули Squared View (View, который имеет квадрат стиля) с Animated.View.
Итак, с помощью this.position.getLayout (), мы можем получить стиль предыдущего и текущего местоположения объекта. , и мы можем увидеть полную анимацию.
Мы берем столько элементов внутри . На данный момент мы только что выбрали Квадрат. Но вы можете добавить столько элементов, сколько захотите.
Теперь, наконец, добавьте компонент SquareAnimation.js в App.js файл.
//App.jsimport React, {Component} из 'react'; импорт {View} из 'react-native'; импорт SquareAnimation из './components/SquareAnimation';export класс по умолчанию. Приложение расширяет компонент {render () {return ( ); }}
Сохраните файл и просмотрите iPhone X Simulator. Обновляйте Simulator снова и снова, и вы увидите, что квадрат перемещается сверху вниз в соответствии с определенными позициями.
Итак, этот пример представляет собой очень простую реализацию Учебное пособие по нативной анимации React . Мы создадим анимацию на основе жестов в следующей публикации. Итак, сейчас это все для React Native Animation Tutorial.
