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

Сегодня мы разберём:

• Как работают анимации в React Native.
• Использование Reanimated для создания сложных анимаций.
• Анимация через Lottie.
• Практическую реализацию анимации нажатия кнопки и анимированной заставки при запуске.

Теория: анимации в React Native

React Native предоставляет встроенный модуль Animated, который подходит для базовых задач. Но если вам нужны сложные и производительные анимации, лучше использовать:

• Reanimated: для сложных интерактивных анимаций с нативным рендерингом.
• Lottie: для воспроизведения готовых JSON-анимаций, созданных в After Effects.

Встроенный модуль Animated

С помощью Animated можно:

• Анимировать изменение стилей компонентов (например, прозрачность, позицию).
• Создавать таймлайны анимаций.

Пример:

import React, { useRef, useEffect } from 'react';
import { Animated, View, StyleSheet } from 'react-native';

const SimpleAnimation = () => {
  const fadeAnim = useRef(new Animated.Value(0)).current; // Начальное значение анимации

  useEffect(() => {
    Animated.timing(fadeAnim, {
      toValue: 1, // Конечное значение прозрачности
      duration: 1000, // Длительность в миллисекундах
      useNativeDriver: true, // Используем нативный драйвер
    }).start();
  }, [fadeAnim]);

  return (
    <Animated.View style={[styles.box, { opacity: fadeAnim }]} />
  );
};

const styles = StyleSheet.create({
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default SimpleAnimation;

Reanimated: мощь и гибкость

Reanimated — это библиотека, которая обеспечивает более высокую производительность за счёт работы на нативной стороне. Она отлично подходит для сложных анимаций, таких как жесты, переходы и интерактивные элементы.

Установка Reanimated:

npm install react-native-reanimated

Не забудьте добавить плагин в babel.config.js:

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

Lottie: готовые анимации

Lottie позволяет использовать JSON-анимации, созданные дизайнерами в After Effects с плагином Bodymovin. Это идеальный инструмент для воспроизведения сложных анимаций без необходимости писать код.

Установка Lottie:

npm install lottie-react-native

⚠️ Для Expo:

expo install lottie-react-native

Практика 1: Анимация нажатия кнопки

Давайте создадим анимацию кнопки, которая изменяет свой размер при нажатии.

Код кнопки с анимацией:

import React, { useRef } from 'react';
import { Animated, TouchableWithoutFeedback, StyleSheet, Text, View } from 'react-native';

const AnimatedButton = () => {
  const scaleAnim = useRef(new Animated.Value(1)).current; // Начальное значение масштаба

  const handlePressIn = () => {
    Animated.spring(scaleAnim, {
      toValue: 0.8, // Уменьшаем размер
      useNativeDriver: true,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(scaleAnim, {
      toValue: 1, // Возвращаем к исходному размеру
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={styles.container}>
      <TouchableWithoutFeedback
        onPressIn={handlePressIn}
        onPressOut={handlePressOut}
      >
        <Animated.View style={[styles.button, { transform: [{ scale: scaleAnim }] }]}>
          <Text style={styles.buttonText}>Нажми меня</Text>
        </Animated.View>
      </TouchableWithoutFeedback>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  button: {
    backgroundColor: '#6200ea',
    paddingVertical: 15,
    paddingHorizontal: 30,
    borderRadius: 25,
  },
  buttonText: {
    color: '#fff',
    fontSize: 18,
  },
});

export default AnimatedButton;

Что происходит:

• При нажатии кнопка уменьшается в масштабе до 80%.
• Когда отпускаем, кнопка возвращается в исходное состояние.

Практика 2: Анимированная заставка при запуске приложения

Теперь добавим заставку при запуске приложения с использованием Lottie.

Код заставки:

import React, { useState, useEffect } from 'react';
import { View, StyleSheet, Text } from 'react-native';
import LottieView from 'lottie-react-native';

const SplashScreen = ({ onFinish }) => {
  useEffect(() => {
    const timer = setTimeout(() => {
      onFinish(); // Вызываем коллбек, чтобы завершить заставку
    }, 3000);

    return () => clearTimeout(timer); // Очищаем таймер
  }, [onFinish]);

  return (
    <View style={styles.splashContainer}>
      <LottieView
        source={require('./assets/splash.json')} // Замените на ваш JSON-файл
        autoPlay
        loop
      />
    </View>
  );
};

const App = () => {
  const [isLoading, setIsLoading] = useState(true);

  if (isLoading) {
    return <SplashScreen onFinish={() => setIsLoading(false)} />;
  }

  return (
    <View style={styles.appContainer}>
      <Text style={styles.text}>Добро пожаловать в приложение!</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  splashContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#000',
  },
  appContainer: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
  text: {
    fontSize: 24,
    color: '#333',
  },
});

export default App;

Как это работает:

• Пока isLoading равно true, отображается заставка.
• Через 3 секунды isLoading меняется на false, и отображается основной экран.
• JSON-анимация воспроизводится с помощью LottieView.

Советы по работе с анимациями

• Не злоупотребляйте анимациями: они должны быть полезными, а не раздражающими.
• Используйте нативные драйверы: это повышает производительность.
• Экспериментируйте с Reanimated: он открывает множество возможностей для кастомизации.