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