Introducción e instalación de Framer-Motion

Framer-motion es una biblioteca de animación y gestos de código abierto y lista para producción para React. Proporciona una API de bajo nivel para simplificar la integración de animación y gestos en la aplicación mientras mantiene la semántica de HTML y SVG.

Características:

  • Animaciones: generará animaciones automáticamente al establecer valores en el accesorio animado.
  • Gestos: Admite gestos como flotar, tocar, desplazar y arrastrar.
  • Variantes: se utilizan para animar subárboles completos de componentes con un solo objeto animado que organiza las animaciones de forma declarativa.
  • Representación del lado del servidor: el estado animado de un componente se representará en el lado del servidor para evitar destellos de contenido rediseñado después de que se cargue el JavaScript.
  • MotionValues: Crea una string de valores declarativa y reactiva para actualizar el resultado de animaciones o gestos.

Además,

  • Soporta variables CSS.
  • Tiene opciones de Accesibilidad.
  • Opción para desmontar animaciones fácilmente.
  • Proporciona transiciones de posición.

Nota: Requiere React 16.8 o versiones superiores para usar Motion.

Componentes:

  • Motion: los componentes de Motion son el núcleo de la API de Motion. Para cada elemento HTML y SVG, hay un componente de movimiento presente.
    Por ejemplo: Para un elemento div, el componente <motion.div/> y para un círculo, los componentes <motion.circle/> están presentes. Estos funcionan igual que antes, pero ofrece accesorios que permiten agregar gestos o animar el elemento a través de accesorios simples.
  • AnimatePresence: estos componentes se utilizan para integrar las animaciones de desmontaje. Anima nuestros componentes al detectar los componentes secundarios directos eliminados del árbol React. 
  • LayoutGroup: agrupa los componentes de movimiento que deben realizar animaciones de diseño juntos. De forma predeterminada, los componentes de movimiento con un accesorio de diseño intentarán detectar y animar los cambios de diseño cada vez que envían un React para renderizar.
  • LazyMotion: estos componentes reducen el tamaño del paquete al cargar de forma síncrona o asíncrona algunas o todas las características del componente de movimiento.
  • MotionConfig: estos componentes establecen opciones de configuración para todos los componentes de movimiento secundarios.
  • Reordenar: estos componentes crean efectos de arrastrar para reordenar con un conjunto simple de componentes o listas como pestañas reordenables o elementos de tareas pendientes.

Veamos una animación simple usando Framer-motion y ReactJs.

Creación de una aplicación React: Cree una aplicación React con el siguiente comando: 

npx create-react-app demo
  • Después de crear la carpeta de su proyecto, es decir, la demostración, muévase a ella con el siguiente comando:

    cd demo
  • Instale el framer-motion desde npm:

    npm i framer-motion

Estructura del proyecto: El proyecto debería verse así:

Ejemplo: ahora, importe el movimiento desde framer-motion en App.js y agregue animación a un elemento div. Aquí, escalaremos el div mientras flotamos.

App.js

import React from "react";
import { motion } from "framer-motion";
  
function App() {
    return (
        <motion.div style={{
            color: 'green',
            fontSize: 20,
            width: '300px',
            height: '30px',
            textAlign: 'center',
            border: '2px solid green',
            margin: '40px'
        }}
  
            whileHover={{ scale: 0.5 }}
        >
            GeeksforGeeks
        </motion.div>
    );
}
  
export default App;

Inicie la aplicación: puede ejecutar el servidor con el siguiente comando:

npm start

Producción:

Publicación traducida automáticamente

Artículo escrito por tejaswaniagrawal23 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *