Создание анимации вращения в React Native

В этом уроке я покажу вам, как создать кнопку, которая поворачивается на 720 градусов при нажатии. Мы будем использовать систему анимации React Native Animated для создания анимации вращения.

Создание компонента

Во-первых, мы создаем функциональный компонент ButtonWithSpin, внутри которого находится TouchableOpacityкомпонент с текстом.

Обратите внимание, что текст создается с помощью Animated.Textкомпонента. Это потому, что текст, который будет вращаться, должен быть анимируемым . Если вы вращаете что-то еще, вы также можете использовать любой из этих компонентов:

• Анимированное.Изображение
• Анимированный.ScrollView
• Анимированный.Просмотр
• Анимированный.Текст
• Анимированный.FlatList
• Animated.SectionList

Функция handleAnimation

Animated.timing()анимирует значение с течением времени, используя функции плавности . По умолчанию он использует easeInOutкривую, которая идеально подходит для того, что мы делаем. Мы передаем наше rotateAnimationзначение и значение конфигурации, где мы устанавливаем продолжительность 800 мс. Анимация запускается вызовом start(), и мы включаем функцию обратного вызова, которая сбрасывает анимацию.

Интерполировать

Метод interpolate()отображает входные диапазоны в выходные диапазоны. Базовое отображение для преобразования диапазона 0–1 в диапазон 0–100 будет следующим:

value.interpolate({
  inputRange: [0, 1],
  outputRange: [0, 100]
});

Мы также создали animatedStyleобъект, который включает в себя массив transformсо значением поворота interpolateRotating, который мы только что создали.

Собираем все вместе

Добавьте animtedStyleобъект к Animated.Textкомпоненту и a widthк TouchableOpacityкомпоненту, и все готово!

Вот так выглядит конечный продукт:

И код:

И вот оно. Я надеюсь, что вы нашли это полезным. Это был мой первый пост на Medium, поэтому любой отзыв очень ценен!