React Native Reanimated — это мощная библиотека, которая позволяет разработчикам создавать плавную и производительную анимацию в приложениях React Native. В этой статье мы рассмотрим несколько методов, предоставляемых React Native Reanimated, а также примеры кода, которые помогут вам эффективно использовать его возможности.

1. Базовая анимация.
   Функция withTimingобычно используется для базовой анимации. Он анимирует значение из исходного состояния в целевое в течение заданного времени.

import { useSharedValue, withTiming, Easing } from 'react-native-reanimated';
const positionX = useSharedValue(0);
// Start the animation
const startAnimation = () => {
  positionX.value = withTiming(200, {
    duration: 500,
    easing: Easing.linear,
  });
};

2. Интерполяция.
   Функция interpolateсопоставляет входной диапазон с выходным диапазоном. Это полезно для создания сложных анимаций на основе введенного значения.

import { useSharedValue, interpolate } from 'react-native-reanimated';
const scrollY = useSharedValue(0);
const opacity = interpolate(scrollY.value, [0, 100], [1, 0]);
// Apply the interpolated value to a component
return <Animated.View style={{ opacity }} />;

3. Анимация на основе жестов.
   React Native Reanimated предоставляет набор обработчиков жестов, таких как usePanGestureHandlerи useTapGestureHandler, которые можно использовать для создания интерактивных анимаций на основе о взаимодействии с пользователем.

import {
  useSharedValue,
  useAnimatedGestureHandler,
  withSpring,
} from 'react-native-reanimated';
import { PanGestureHandler } from 'react-native-gesture-handler';
const positionX = useSharedValue(0);
const onGestureEvent = useAnimatedGestureHandler({
  onStart: (_, ctx) => {
    ctx.startX = positionX.value;
  },
  onActive: (event, ctx) => {
    positionX.value = ctx.startX + event.translationX;
  },
  onEnd: () => {
    // Snap back to the original position using spring animation
    positionX.value = withSpring(0);
  },
});
// Wrap the component with PanGestureHandler
return (
  <PanGestureHandler onGestureEvent={onGestureEvent}>
    <Animated.View style={{ transform: [{ translateX: positionX.value }] }} />
  </PanGestureHandler>
);

4. Сложные анимации:
   React Native Reanimated позволяет объединять несколько анимаций с помощью функций sequenceи parallel. Это позволяет создавать более сложные анимации с точным контролем.

import {
  useSharedValue,
  withTiming,
  sequence,
  parallel,
} from 'react-native-reanimated';
const positionX = useSharedValue(0);
// Perform a sequence of animations
const startSequenceAnimation = () => {
  positionX.value = sequence([
    withTiming(100, { duration: 500 }),
    withTiming(200, { duration: 500 }),
    withTiming(0, { duration: 500 }),
  ]);
};
// Perform animations in parallel
const startParallelAnimation = () => {
  positionX.value = parallel([
    withTiming(100, { duration: 500 }),
    withTiming(200, { duration: 500 }),
    withTiming(300, { duration: 500 }),
  ]);
};

React Native Reanimated — это ценная библиотека для создания потрясающих анимаций в ваших приложениях React Native. Используя такие методы, как базовая анимация, интерполяция, анимация на основе жестов и сложная анимация, вы можете добиться плавного и интерактивного взаимодействия с пользователем. Поэкспериментируйте с этими методами и раскройте весь потенциал React Native Reanimated в своих проектах.