Анимации

Все темы React Developer

Как реализовать анимацию в React-приложении?

Для реализации анимации в React-приложении можно использовать CSS-анимации, библиотеки для анимации или React Transition Group.

Способы реализации:

1. CSS-анимации:

   • Определите анимации в CSS и примените классы в компонентах.

   /* styles.css */
   .fade-enter {
     opacity: 0;
   }
   .fade-enter-active {
     opacity: 1;
     transition: opacity 300ms;
   }

   import React from 'react';
   import './styles.css';
   
   const MyComponent = ({ in: inProp }) => (
     <div className={inProp ? 'fade-enter fade-enter-active' : 'fade-enter'}>
       Hello, World!
     </div>
   );
   
   export default MyComponent;

2. React Transition Group:

   • Используйте CSSTransition или Transition для управления анимациями при изменении состояния компонента.

   import React from 'react';
   import { CSSTransition } from 'react-transition-group';
   import './styles.css';
   
   const MyComponent = ({ in: inProp }) => (
     <CSSTransition in={inProp} timeout={300} classNames="fade">
       <div>Hello, World!</div>
     </CSSTransition>
   );
   
   export default MyComponent;

3. Framer Motion:

   • Используйте библиотеку framer-motion для более сложных анимаций.

   import { motion } from 'framer-motion';
   
   const MyComponent = () => (
     <motion.div animate={{ opacity: 1 }} initial={{ opacity: 0 }} transition={{ duration: 0.5 }}>
       Hello, World!
     </motion.div>
   );
   
   export default MyComponent;

Анимацию в React-приложении можно реализовать с помощью CSS-анимаций, React Transition Group или библиотек, таких как framer-motion, для создания плавных и интерактивных эффектов.

Как реализовать анимацию переходов между компонентами в React Router?

Для реализации анимации переходов между компонентами в React Router используйте библиотеку react-transition-group вместе с React Router.

Шаги:

1. Установка библиотек:

   npm install react-router-dom react-transition-group

2. Создание анимированных переходов:

   • Оберните маршруты в компонент CSSTransition и используйте Switch для маршрутизации.

Пример для React Router 5. Для React Router 6 и 7 API маршрутов нужно адаптировать:

import React from "react";
import {
  BrowserRouter as Router,
  Route,
  Switch,
  useLocation,
} from "react-router-dom";
import { CSSTransition, TransitionGroup } from "react-transition-group";
import "./styles.css"; // CSS для анимации

const Home = () => <div className="page">Home Page</div>;
const About = () => <div className="page">About Page</div>;

const App = () => {
  const location = useLocation();

  return (
    <TransitionGroup>
      <CSSTransition key={location.key} timeout={300} classNames="fade">
        <Switch location={location}>
          <Route exact path="/" component={Home} />
          <Route path="/about" component={About} />
        </Switch>
      </CSSTransition>
    </TransitionGroup>
  );
};

const Root = () => (
  <Router>
    <App />
  </Router>
);

export default Root;

Пример CSS для анимации:

/* styles.css */
.page {
  position: absolute;
  width: 100%;
  height: 100%;
  transition: opacity 300ms ease-in-out;
}

.fade-enter {
  opacity: 0;
}
.fade-enter-active {
  opacity: 1;
}
.fade-exit {
  opacity: 1;
}
.fade-exit-active {
  opacity: 0;
}

Для анимации переходов между компонентами в React Router используйте react-transition-group для обертки маршрутов и определения CSS-анимаций.

Как реализовать анимированный переход между компонентами в React Native?

Для реализации анимированных переходов между компонентами в React Native используйте библиотеку react-navigation вместе с анимациями React Native Reanimated.

Шаги:

1. Установка библиотек:

   npm install @react-navigation/native @react-navigation/stack react-native-gesture-handler react-native-reanimated

2. Конфигурация:

   • Убедитесь, что правильно настроены react-native-gesture-handler и react-native-reanimated согласно документации.

3. Создание анимированных переходов:

   • Используйте createStackNavigator из @react-navigation/stack.

Пример:

import "react-native-gesture-handler";
import * as React from "react";
import { NavigationContainer } from "@react-navigation/native";
import {
  createStackNavigator,
  CardStyleInterpolators,
} from "@react-navigation/stack";
import HomeScreen from "./HomeScreen";
import DetailsScreen from "./DetailsScreen";

const Stack = createStackNavigator();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator
        screenOptions={{
          headerShown: false,
          cardStyleInterpolator: CardStyleInterpolators.forHorizontalIOS,
        }}
      >
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

Пример экранов:

// HomeScreen.js
import React from 'react';
import { View, Text, Button } from 'react-native';

const HomeScreen = ({ navigation }) => (
  <View>
    <Text>Home Screen</Text>
    <Button title="Go to Details" onPress={() => navigation.navigate('Details')} />
  </View>
);

export default HomeScreen;

// DetailsScreen.js
import React from 'react';
import { View, Text } from 'react-native';

const DetailsScreen = () => (
  <View>
    <Text>Details Screen</Text>
  </View>
);

export default DetailsScreen;

Для анимированных переходов между компонентами в React Native используйте react-navigation с createStackNavigator и настройте анимации с помощью CardStyleInterpolators.