Aprenda a agregar animaciones simples a su aplicación React con un mínimo esfuerzo de codificación.
La animación es una parte crucial de casi todas las aplicaciones web modernas. También es una de las partes más difíciles de hacer bien.
Framer Motion es una biblioteca creada para React que facilita la animación de componentes.
Cómo funciona Framer Motion
Framer Motion utiliza el componente de movimiento para las animaciones. Cada elemento HTML/SVG tiene un componente de movimiento equivalente que tiene accesorios para gestos y animaciones. Por ejemplo, un div HTML regular se ve así:
<división>división>
Mientras que el equivalente de Framer Motion se ve así:
<movimiento.div>movimiento.div>
Los componentes de movimiento admiten una animar prop que desencadena animaciones cuando cambian sus valores. Para animaciones complejas, utilice el usarAnimar anzuelo con mira telescópica ref.
Animación en Framer Motion
Antes de usar Framer Motion en su proyecto, necesita tener la Tiempo de ejecución de Node.js
y el administrador de paquetes Yarn instalado en su computadora y entender qué es React y cómo usarlo.Puede ver y descargar el código fuente de este proyecto desde su Repositorio GitHub. Utilizar el archivos de inicio branch como una plantilla de inicio para seguir junto con este tutorial, o la archivos finales rama para la demostración completa. También puede ver el proyecto en acción a través de este demo en vivo.
Abre tu terminal y ejecuta:
git clone [email protected]: makeuseofcode/framer-motion-app.git
cd framer-motion-app
hilo
desarrollador de hilo
cuando abres servidor local: 5173 en su navegador, verá esto:
Ahora puede crear su primera animación simple, un botón que crece al pasar el mouse y se encoge cuando el cursor se va.
Abre el src/Aplicación.jsx archivo en un editor de código. Este archivo contiene un componente funcional que devuelve un fragmento React. Importar el Botón componente, luego renderícelo, pasando en un texto apuntalar:
Botón animado</h4>
Mueva el mouse sobre el botón para ver el efecto</div>
A continuación, edite el Botón.jsx archivar e importar el movimiento utilidad de framer-motion:
importar { movimiento } de"movimiento del encuadre"
Ahora, reemplace el regular botón elemento con el movimiento.[elemento] componente. En este caso, utilice el botón.de.movimiento componente.
Luego agrega un mientras pasa el cursor gesto prop y pasar un objeto de valores que Framer Motion debe animar cuando un usuario pasa el cursor sobre el botón.
escala: 1.1 }}> {texto}
</motion.button>
El botón ahora se animará cuando mueva el puntero del mouse sobre él o fuera de él:
Quizás se pregunte por qué esta demostración no utiliza Animaciones CSS en cambio. Framer Motion tiene ventajas sobre CSS porque se integra con el estado de React y generalmente da como resultado un código más limpio.
A continuación, intente algo más complejo: animar un modal. En Fondo.jsx, importe la utilidad de movimiento y cree un componente funcional con al hacer clic y niños accesorios. devolver un movimiento.div componente con clase "telón de fondo" y al hacer clic oyente en el JSX.
exportarpor defectofunciónFondo() {
devolver (<>
</motion.div>
</>)
}
Luego agregue tres accesorios a saber: inicial, animar, y salida. Estos accesorios representan el estado original del componente, el estado en el que debe animarse el componente y el estado en el que debe estar el componente después de la animación, respectivamente.
Agregar al hacer clic y niños accesorios para el movimiento.div y establezca la duración de la transición en 0,34 segundos:
exportarpor defectofunciónFondo ({onClick, niños}){
devolver (<>
al hacer clic = {al hacer clic}
nombreclase="fondo"
inicial={{ opacidad: 0, filtro de fondo:"desenfoque (0px)" }}
animar={{ opacidad: 1, filtro de fondo:"desenfoque (3.4px)" }}
salir={{ opacidad: 0, filtro de fondo:"desenfoque (0px)"}}
transición={{
duración: 0.34,
}}
>
{niños}
</motion.div>
</>)
}
El Fondo componente es un envoltorio para el Modal componente. Al hacer clic en el fondo, se descarta el modal. En Modal.jsx, importar movimiento y el componente Telón de fondo. El componente funcional predeterminado acepta accesorios: closeModal y texto. Cree una variable de variante como un objeto.
constante variantes = {
inicial: {
y: "-200%",
opacidad: 1,
},
visible: {
y: "50%",
transición: {
duración: 0.1,
tipo: "primavera",
mojadura: 32,
rigidez: 500
}
},
salida: {
y: "200%",
}
}
Devuelve un componente motion.div envuelto por un componente de telón de fondo con un accesorio de "variantes" que apunta al objeto de variantes. Las variantes son un conjunto de estados de animación predefinidos en los que podría estar el componente.
onClick={(e) => e.stopPropagation()}
nombreclase="modal"
variantes={variantes}
inicial='inicial'
animar ='visible'
salir='salida'
>
{texto}
</motion.div>
</Backdrop>
A continuación, debe agregar la funcionalidad para mostrar el modal cuando un usuario hace clic en el botón. Abre el Aplicación.jsx archivar e importar el useState gancho de reacción y el Modal componente.
importar { estado de uso } de"reaccionar";
importar Modal de"./componentes/Modal";
Luego crea un modalAbierto estado con el valor predeterminado establecido en FALSO.
constante [modalOpen, setModalOpen] = useState(FALSO);
A continuación, defina una función. closeModal que establece el modalAbierto a falso
funcióncloseModal() {
setModalOpen(FALSO)
}
En la parte superior del fragmento React, renderice condicionalmente un Modal componente y pasar el apropiado texto prop con la propiedad closeModal.
{modalOpen && <Modaltexto="Este es un modal animado con Framer Motion"}
Luego, en el segundo sección elemento, renderizar un botón elemento con un controlador de eventos onClick que establece modalOpen en falso.
Puede notar que React desmonta el componente Modal del DOM sin una animación de salida. Para arreglar eso, necesitas un AnimatePresence componente. Importar AnimatePresence desde framer-motion.
importar {Presencia animada} de'movimiento del encuadre';
Ahora, envuelva el componente Modal en el componente AnimatePresence y configure el inicial prop a falso y el modo esperar".
FALSO} modo="esperar">
{modalOpen && <Modaltexto="Este es un modal animado con Framer Motion"closeModal={closeModal} />}
</AnimatePresence> El componente AnimatePresence permite que las animaciones de salida se completen antes de que React las desmonte del DOM.
Framer Motion puede animar componentes en desplazamiento usando el mientras que en la vista apuntalar. Abre el ScrollElement.jsxe importar el movimiento utilidad. Cambiar división a movimiento.div con la clase "elemento de desplazamiento".
inicial={{ opacidad: 0, escala: 0, girar: 14 }}
whileInView={{ opacidad: 1, escala: 1, girar: 0 }}
transición={{ duración: .8 }}
ventana gráfica={{ una vez: verdadero }}
nombreclase='elemento de desplazamiento'
>
Elemento de desplazamiento
</motion.div>
El mirador prop apunta a un objeto que establece una vez a verdadero. A continuación, en el Aplicación.jsx archivo, importe el elemento de desplazamiento y defina una variable scrollElementCount que contenga un valor entero.
dejar scrollElementCount=14;
En el último sección elemento, cree una matriz con una longitud específica definida por scrollElementCount que mapea cada elemento de la matriz y genera un componente con una clave única basada en el índice i.
{[... Matriz (número de elementos de desplazamiento)]. mapa ((x, yo) =><elemento de desplazamientollave={i} />)}
Ahora, volviendo al navegador, los elementos deberían animarse cuando los desplaza a la vista.
Alternativas a Framer Motion
Framer Motion no es la única biblioteca de animación del mercado. Si no le gusta la forma en que Framer Motion hace las cosas, puede probar otras bibliotecas como reaccionar primavera.
También puede usar animaciones CSS, que todos los navegadores modernos admiten de forma nativa, pero las técnicas involucradas pueden ser difíciles de aprender y configurar.
Mejorar la experiencia del usuario con animaciones
Cada usuario espera una experiencia suave como la mantequilla cuando usa una aplicación web. Un sitio web o una aplicación sin animaciones se siente estático y no responde. Las animaciones mejoran la experiencia del usuario porque puede usarlas para comunicar comentarios al usuario cuando realiza una determinada acción.