5 formas de implementar una animación de escritura en React

Share on X (Twitter)Share on FacebookShare on LinkedInShare on Email

Nota del editor: este artículo fue actualizado por última vez por Chimezie Innocent el 3 de mayo de 2024 para incluir el uso de las bibliotecas Typed.js y react-text-transition para implementar animaciones en React.

El efecto de animación de escritura se ha popularizado para añadir interactividad visual a las aplicaciones web. En este artículo, exploraremos cinco maneras sencillas y efectivas de implementar animaciones de escritura en React.

Desde la creación de un efecto de máquina de escribir desde cero usando React hasta el aprovechamiento de bibliotecas de animación de escritura dedicadas como react-typed, react-type-animation, Typed.js y react-text-transition, aprenderá a implementar efectos de máquina de escribir atractivos en sus aplicaciones React.

Puedes encontrar el código completo del proyecto en este repositorio de GitHub. ¡Comencemos!

Uso del useStategancho y setTimeoutla función

Una forma de implementar una animación de escritura en React es utilizando el Hook y la función integrada useStatesetTimeout. Este método permite tener control total sobre la animación.

Para empezar, primero deberá crear un componente llamado Typewriter.jsdentro de la srccarpeta que albergará su animación de escritura. Dentro de este componente, tendrá una variable de estado para registrar el texto actual que se mostrará y un índice para determinar qué carácter agregar a continuación.

Puedes inicializar las variables de estado usando el useStateHook. El texto actual será inicialmente una cadena vacía y el índice actual comenzará en 0:

importar React, { useState, useEffect } de 'react';const Typewriter = ({texto, retraso}) = { const [textoActual, establecerTextoActual] = useState(''); const [índiceActual, establecerÍndiceActual] = useState(0); // La lógica de escritura va aquí devolver span{TextoActual}/span;};exportar máquina de escribir predeterminada;

En el ejemplo anterior, la textpropiedad se utiliza para pasar el contenido de texto deseado al Typewritercomponente. Este es el texto que se mostrará gradualmente a medida que avanza la animación de escritura.

La delaypropiedad se utiliza para especificar el retraso en milisegundos entre la adición de cada carácter al texto actual. Esto determina la velocidad de la animación de escritura.

A continuación, necesitamos implementar la lógica de animación dentro del componente. Esto se puede lograr utilizando el useEffectHook. En este caso, usaremos el useEffectHook para configurar una setTimeoutfunción que agregará el siguiente carácter al texto actual tras un cierto retraso:

usarEfecto(() = { si (índiceActual texto.longitud) { tiempo de espera constante = setTimeout(() = { setCurrentText(prevText = prevText + texto[currentIndex]); establecerÍndiceActual(índicePrevio = índicePrevio + 1); }, demora); return() = clearTimeout(tiempo de espera); }}, [índiceActual, retraso, texto]);

En el useEffectHook, comprobamos si currentIndexes menor que la longitud de text. Si es verdadero, configuramos una setTimeoutfunción que añade el siguiente carácter de la textpropiedad al currentTextestado después del retardo especificado.

También incrementamos currentIndexpara pasar al siguiente carácter. Además, entregamos una función de limpieza que borra el tiempo de espera cuando se desmonta el componente o cambian las dependencias.

Ahora, veamos un ejemplo de cómo podemos utilizar el Typewritercomponente que acabamos de crear:

importar máquina de escribir desde "./Typewriter";constante App = () = { devolver ( div h1 Bienvenido a Typewriter text="Mi aplicación React" delay={100} / /h1 /div );};exportar aplicación predeterminada;

Deberías ver algo como esto:

En este caso, solo aplicamos la animación de escritura a la cadena My React Appy establecimos el retardo en 100milisegundos. Si desea que la animación de escritura sea más rápida o más lenta, simplemente aumente o disminuya el retardo según sea necesario.

Aunque el GIF anterior muestra la animación de escritura repetida en bucle, en realidad, el efecto de animación solo se produce una vez. El texto se mostrará normalmente, sin la animación de escritura.

Sin embargo, en algunos casos, podrías querer que la animación de escritura se repita infinitamente. Veamos cómo lograrlo a continuación.

Añadiendo bucles infinitos a nuestra animación de escritura en React

Además de la animación básica de escritura, podemos mejorar el Typewritercomponente agregando una función de bucle infinito. Esto permite que la animación se ejecute infinitamente, mostrando el texto continuamente.

Para lograr esto, necesitamos agregar una nueva propiedad llamada “nombre” infiniteal Typewritercomponente. Esta propiedad permite que la animación se ejecute infinitamente cuando se establece en “sub” true.

Cuando currentIndexalcanza la longitud de text, el componente comprueba si infinitees true. De ser así, restablece el currentIndexvalor a 0y establece currentTextuna cadena vacía para reiniciar la animación desde el principio.

Su código debería verse así:

importar { useState, useEffect } de 'react';const Typewriter = ({texto, retraso, infinito}) = { const [textoActual, establecerTextoActual] = useState(''); const [índiceActual, establecerÍndiceActual] = useState(0); usarEfecto(() = { dejar tiempo de espera; si (índiceActual = texto.longitud) { tiempo de espera = setTimeout(() = { setCurrentText(prevText = prevText + texto[currentIndex]); establecerÍndiceActual(índicePrevio = índicePrevio + 1); }, demora); } else if (infinite) { // AGREGAR ESTA VERIFICACIÓN establecerÍndiceActual(0); establecerTextoActual(''); } return() = clearTimeout(tiempo de espera }, [currentIndex, retraso, infinito, texto]); devolver span{TextoActual}/span;};exportar máquina de escribir predeterminada;

Ahora, veamos un ejemplo de cómo podemos usar el Typewritercomponente actualizado con la infinitepropiedad en su Appcomponente:

importar máquina de escribir desde "./Typewriter";constante App = () = { devolver ( div h1 Bienvenido a Typewriter text="Mi aplicación React" delay={100} infinito / /h1 /div );};exportar aplicación predeterminada;

Ahora que comprende cómo implementar una animación de tipo usando React Hooks y la setTimeoutfunción, exploramos otros métodos que aprovechan bibliotecas de animación dedicadas para lograr efectos similares con funcionalidad adicional.

Uso de la biblioteca de animación de tipo reaccionar.

Otro enfoque para implementar una animación de escritura en React es usar bibliotecas especializadas en animación de escritura. Una de estas bibliotecas es react-typed, que proporciona una forma sencilla y eficiente de crear efectos de escritura con funciones adicionales y opciones de personalización.

Para comenzar, necesitarás instalar reaccionar-typed en tu proyecto:

npm instala react-typed

Una vez instalado, puedes importar el ReactTypedcomponente react-typede incorporarlo a tu aplicación React de esta manera:

// Aplicación.jsimportar { ReactTyped } de "react-typed";constante App = () = { devolver ( div h1 Bienvenido a{" "} ReactTyped strings={["Mi aplicación React"]} typeSpeed={100} loop / /h1 /div );};exportar aplicación predeterminada;

En el ejemplo anterior, el Appcomponente utiliza el ReactTyped /componente de react-typed. Acepta varias propiedades para personalizar la animación de escritura:

• stringsUna matriz de cadenas que se mostrarán una tras otra. En este ejemplo, hemos proporcionado una matriz con una sola cadena:My React App
• typeSpeed: Especifica la velocidad a la que se escriben los caracteres. Representa el retardo en milisegundos entre la visualización de cada carácter.
• loop: Determina si la animación debe repetirse indefinidamente. Al configurarlo, truese repetirá la animación.

Deberías ver algo como esto:

También hay otros accesorios que podemos usar para personalizar el ReactTypedcomponente, como:

• backSpeed: Determina la velocidad a la que se eliminan los personajes durante el ciclo de animación. Representa el tiempo de retardo en milisegundos entre la eliminación de cada personaje.
• cursorChar:Le permite personalizar el carácter del cursor que aparece durante la animación de escritura.
• showCursor: Controle si el cursor debe ser visible durante la animación de escritura. Al configurarlo, truese mostrará el cursor.

A continuación se muestra un ejemplo actualizado que demuestra el uso de estos accesorios adicionales:

importar { ReactTyped } de "react-typed";constante App = () = { devolver ( div h1 Bienvenido a{" "} ReactTyped cadenas={["Mi aplicación React"]} tipoVelocidad={100} bucle Velocidad de retroceso={20} cursorChar="" showCursor={verdadero} / /h1 /div );};exportar aplicación predeterminada;

Vea el resultado a continuación:

Ahora, creemos un ejemplo más que probablemente hayas visto en muchos sitios web. Se trata del efecto máquina de escribir, que muestra diferentes roles o profesiones. Por ejemplo, podrías localizar en sitios web de portafolios personales:

Para lograr esta animación de escritura en su proyecto React, su código debería verse así:

importar ReactTyped desde "react-typed";constante App = () = { devolver ( div h1 Soy un{" "} ReactTyped cadenas={["Desarrollador", "Escritor", "Diseñador"]} tipoVelocidad={100} bucle Velocidad de retroceso={20} cursorChar="" showCursor={verdadero} / /h1 /div );};exportar aplicación predeterminada;

En el código anterior, la stringspropiedad del ReactTypedcomponente es una matriz de cadenas que representan diferentes roles. En este ejemplo, hemos proporcionado un array con las cadenas Developer, Writery Designer. El efecto de máquina de escribir animará estas cadenas una tras otra, como se muestra en el GIF anterior.

Al utilizar la biblioteca de tipos de React, podemos crear fácilmente animaciones de escritura dinámicas con velocidad personalizable, comportamiento de bucle y múltiples cadenas para mostrar. Este método ofrece un enfoque más sencillo en comparación con crear una animación de escritura desde cero en React.

A continuación, exploraremos otro método para implementar una animación de tipo en React usando una biblioteca de animación diferente llamada react-type-animation.

Uso de la biblioteca react-type-animation

Además de la biblioteca de tipos de React mencionada anteriormente, react-type-animation es otra excelente biblioteca de animación para crear animaciones de escritura en React. Esta biblioteca ofrece una forma sencilla de implementar efectos dinámicos de máquina de escribir con diversas opciones de personalización.

Para comenzar, necesitarás instalar la biblioteca react-type-animation en tu proyecto:

npm instala react-type-animation

Una vez instalado, puedes importar el TypeAnimationcomponente desde react-type-animation y usarlo en tu proyecto React de esta manera:

importar { TypeAnimation } de 'react-type-animation';const App = () = { return ( div TypeAnimation sequence={[ "Soy un desarrollador", 1000, "Soy un escritor", 1000, "Soy un diseñador", 1000, ]} speed={50} repeat={Infinity} style={{ fontSize: '2em' }} / /div );};exportar aplicación predeterminada;

En el ejemplo proporcionado, el Appcomponente incluye el TypeAnimationcomponente de react-type-animation. El TypeAnimationcomponente acepta varias propiedades para controlar la animación de escritura:

• sequenceUna matriz que define la secuencia de cadenas y los retrasos para la animación de escritura. Cada elemento de la matriz representa una cadena que se mostrará o un retraso en milisegundos antes de pasar al siguiente elemento.
• speedDetermina la velocidad a la que se escriben los caracteres. Representa el retardo en milisegundos entre la visualización de cada carácter.
• repeatControla el número de veces que se repetirá la animación. Si se configura en [ InfinityAjustar], la animación se repetirá indefinidamente.

Tenga en cuenta que en este ejemplo, tenemos una secuencia de cadenas — I'm a Developer, I'm a Writer, y I'm a Designer— con retrasos de 1000milisegundos entre cada cadena.

Al incluir el mismo texto inicial en cada cadena y variar la parte dinámica, podemos crear un efecto en el que la parte estática solo se escribe una vez.

El resultado debería ser similar a nuestro último ejemplo usando la biblioteca de tipos react.

Animación de escritura de varias líneas con react-type-animation

Además de las animaciones de escritura de una sola línea, la biblioteca react-type-animation permite crear efectos de escritura multilínea. Esto permite mostrar varias líneas de texto de forma secuencial y animada.

Veamos un ejemplo de una animación de escritura de varias líneas usando la biblioteca react-type-animation:

importar { TypeAnimation } de 'react-type-animation';const App = () = { return ( div TypeAnimation sequence={[ `¡Bienvenido a mi sitio web!nSoy desarrolladorny diseñador.`, 1000, "", ]} speed={50} style={{ whiteSpace: 'pre-line', fontSize: '2em' }} repeat={Infinity} / /div );};exportar aplicación predeterminada;

En el ejemplo anterior, la sequencepropiedad contiene una cadena de varias líneas que representa el texto que se mostrará. Cada línea está separada por nel carácter de nueva línea.

El mensaje inicial — Welcome to my website!— es seguido por I'm a Developeren una nueva línea, luego and a Designeren la línea siguiente.

Para garantizar que se representen correctamente los saltos de línea, configuramos la whiteSpacepropiedad CSS pre-lineen la propiedad de estilo del TypeAnimationcomponente. Esto permite que el componente interprete los caracteres de nueva línea y muestre los mensajes en líneas separadas. Vea el resultado a continuación:

Siéntase libre de modificar el contenido del texto, la velocidad de escritura, el estilo y otros parámetros según sus requisitos específicos.

Uso de la biblioteca de animación Typed.js

Typed.js es otra excelente biblioteca que puedes usar para implementar animaciones de escritura en tu aplicación. Para usarla, instálala con cualquiera de los siguientes comandos:

/* npm */npm install typed.js/* hilo */hilo agregar typed.js

Después de la instalación, puedes usarlo de la siguiente manera:

// App.jsimport { useEffect, useRef } de "react";import Typed de "typed.js";const App = () = { const el = useRef(null); useEffect(() = { const typed = new Typed(el.current, { strings: ["Soy un desarrollador de software", "Soy un escritor técnico"], typeSpeed: 50, loop: true, loopCount: Infinity, cursorChar: "|" }); return () = { typed.destroy(); }; }, []); return ( div h1 {" "} Hola, span ref={el} /{" "} /h1 /div );};export default App;

Typed.js usa el useRefHook para crear una referencia a un elemento DOM y luego la almacena en una variable llamada el. Esta referencia apunta al elemento donde se aplicará la animación de escritura.

Dentro del useEffectHook, se crea una nueva instancia de la biblioteca Typed.js. El primer argumento de la instancia es el.current, que corresponde al elemento DOM que queremos animar, y luego pasamos nuestro objeto de opciones de configuración como segundo argumento. Estas opciones definen el comportamiento de la animación:

• strings:Una matriz de cadenas que se escribirán secuencialmente
• typeSpeed:La velocidad a la que se escriben los caracteres (milisegundos entre caracteres)
• loop: Whether the animation should loop continuously
• loopCount: The number of times the animation should loop
• cursorChar: Character to display as the cursor during animation

Finally, a cleanup function is returned from the useEffect Hook to destroy the instance once the component unmounts:

Using the react-text-transition animation library

react-text-transition is another, seamless text transition library that you can use to animate your text changes. To use it, install it using the command below:

npm install react-text-transition

After installation, you can use the library like so:

// App.jsimport { useEffect, useState } from "react";import TextTransition, { presets } from "react-text-transition";const TEXTS = ["Welcome to my website!", "I'm a Developer", "and a Designer."];const App = () = {  const [textIndex, setTextIndex] = useState(0);  useEffect(() = {    const interval = setInterval(() = {      setTextIndex((index) = index + 1);    }, 3000);    return () = clearInterval(interval);  }, []);  return (    div      h1        TextTransition springConfig={presets.wobbly}          {TEXTS[textIndex % TEXTS.length]}{" "}        /TextTransition      /h1    /div  );};export default App;

Similar to the other typing amination libraries, textTransition and presets are imported from react-text-transition. Next, a constant array named TEXTS is defined and contains the strings that will be displayed sequentially during the animation. Using a setInterval function in our useEffect, we update the textIndex state every three seconds. Additionally, a cleanup function is required to clear or terminate the interval when the component unmounts.

Finally, the springConfig prop is set to presets.wobbly. This defines the animation style as a wobbly transition effect:

Using third-party libraries vs. implementing animation directly

Below are some reasons why using third-party libraries is easier and more performant than implementing the animation directly:

• Pre-built features: Animation libraries like the ones in this article come with built-in functionality and customizable options, which reduces the need for the manual coding of animation logic
• Time-saving: Third-party animation libraries allow developers to implement complex animations quickly without having to write detailed logic and handle all the edge cases themselves
• Simpler syntax: Libraries often provide cleaner APIs for defining animations, reducing the need to write low-level codes for the animation. You only call the API and use it where needed, thus decreasing development time
• Community support: Because many developers use these libraries, there is proper documentation, code maintenance, and active communities for troubleshooting and finding solutions. In other cases, such as when the developers who initially wrote the code are not around, newer developers can understand and continue extending the code simply by reviewing the documentation

Conclusión

Con esto concluye nuestro tutorial sobre cómo crear animaciones de escritura en React. En este tutorial, exploramos cinco métodos diferentes para implementar animaciones de escritura en React. Puedes consultar el código completo en GitHub.

Al crear una animación de mecanografía desde cero usando React, o aprovechar bibliotecas de animación dedicadas como react-typed, react-type-animation, Typed.js y react-text-transition, podemos agregar fácilmente efectos de máquina de escribir atractivos a nuestras aplicaciones React.

Si tienes alguna pregunta o comentario, no dudes en dejarlo abajo. ¡Que disfrutes programando!

Empieza ahora

Si quieres conocer otros artículos parecidos a 5 formas de implementar una animación de escritura en React puedes visitar la categoría Guias.