Давайте узнаем, как использовать React Native — анимированную библиотеку

что будем строить…

что тебе понадобится …

  • create-react-native-app, nodejs и симулятор (либо ios, либо Android)
  • От 30 минут до часа зависит от вашего знакомства с React и JS.

исходный код

  • код для этого здесь, вы можете найти изображения в папке /img

Настройка

Поскольку Expo берет на себя большую часть рутинной работы (например, создание и запуск на симуляторах iOS и Android), настройка довольно проста.

После запуска create-react-native-app halloween откройте файл App.js.
Мы создадим несколько компонентов, но для краткости я оставлю их все в файле App.js.

Я создал gif-изображение для тыквы и фоновое изображение ведьмы на основе мюзикла Wicked. Не стесняйтесь использовать любое изображение, которое вы хотите.

Создание пользовательского интерфейса

Это довольно небольшой проект, но мне всегда нравится настраивать маршрутизатор самостоятельно, чтобы иметь контроль над тем, какой компонент я хочу отобразить на экране. Мы можем …

Затем создайте компоненты <StartPage /> и <MainPage />…

Наконец, стили…

Стиль очень похож на CSS, если вы знакомы с web-dev и flex-box, он должен чувствовать себя как дома.

Если вы все сделали правильно, вы сможете перемещаться между этими двумя страницами.

Анимации

Теперь приступаем к самой интересной части — анимации. Я считаю, что есть несколько пакетов npm, которые вы можете использовать для достижения анимации на уровне компонентов в RN, но, поскольку низкоуровневый API не так уж сложен в освоении (и часто хорошей идеей является создание собственной анимации с нуля), я Я собираюсь использовать «Анимированный» модуль, который поставляется с RN.

появляющаяся анимация

Во-первых, давайте создадим компонент оболочки постепенного появления. Мы будем использовать это, чтобы обернуть эти два компонента, которые мы только что создали.

а затем мы используем его, чтобы обернуть начальный и главный компоненты страницы, например,

И давайте проверим это…

Выглядит довольно хорошо! Не стесняйтесь возиться с этими значениями в методе .timing и посмотрите, чего вы можете достичь — это действительно весело!

анимация с вращающейся тыквой

В предварительном просмотре приложения вы могли заметить, что некоторые тыквы вращаются.

Это довольно легко сделать — во-первых, мы создаем компонент тыквы, инициируем новый Animated.Value со значением 0, передаем его методу вращения, который мы будем создавать, и, наконец, используем interpolate() для отображения диапазонов (ввод, степень, и т.д. …).

Этот start(() => this.spin()) используется для зацикливания анимации. Я считаю, что в API есть метод цикла, поэтому, если вы хотите использовать его, не стесняйтесь.

И поместите этот компонент в компонент MainPage, и вы должны увидеть что-то вроде этого,

Расположение шаткое, но мы позаботимся об этом после того, как сделаем тыкву осязаемой и добавим к ней пружинящую анимацию.

весенняя анимация

Теперь нам нужно сделать так, чтобы тыква реагировала на прикосновение (или нажатие) и вернуть анимацию пружины в качестве обратной связи. Для этого мы обернем компонент компонентом <TouchableHighlight> и передаем метод анимации пружины, который мы напишем в реквизите onPress.

Обратите внимание на onPress ={isPressed ? this.spring.bind(this): null} , мы добавили этот тернарный оператор, чтобы убедиться, что тыква неприкосновенна, пока анимация не закончится. И вместо того, чтобы явно задавать ширину и высоту, мы передаем эти значения в качестве реквизита, чтобы их было легко настроить. То же самое касается свойства вращения — если его значение равно true, сработает анимация вращения.

Если все правильно написано, вы должны увидеть вот это,

Подведение итогов

Это почти все! Я хотел сделать быстрое упражнение по API анимации RN, поэтому я подумал об этом в самолете дома и закодировал сегодня. У меня это заняло несколько часов, и я не эксперт по RN, так что это должно быть легко и для вас, если вы знакомы с React и Javascript.

Я надеюсь, что вы нашли этот блог полезным для вашего проекта. Если у вас есть какие-либо вопросы, не стесняйтесь оставлять комментарии или обращаться ко мне по адресу [email protected].

Вы можете найти исходный код для этого здесь

🎃🎃🎃🎃Счастливого Хэллоуина!🎃🎃🎃🎃🎃

  • Корейская версия этой статьи еще не написана.