0
318
ViewsAnimar texto con React (efecto de escritura)
Estoy tratando de animar texto con React. Como una máquina de escribir. Estoy usando setTimeout y setState. Aquí está mi código. ¿Hay alguna manera de hacerlo más rápido y con una animación más fluida? Gracias
const [text, setText] = useState<string>(' ') const animateText = (direction: boolean) => { description.substring(120, description.length) const tick = description.length - 120 console.log('direction', direction) if (direction) { for (let index = 0; index < tick; index++) { setTimeout(() => { setText(description.substring(120, index)) }, index * 0.01) } } else { for (let index = 0; index < tick; index++) { setTimeout(() => { setText(description.substring(120, description.length - index)) }, index * 0.01) } } } 
·
Juan Pablo Isaza
1 answers
Answer question0
A su código le faltan algunos atributos como el evento que activa el texto animado. Pero al activarlo en la carga del primer componente (consulte useEffect) y agregar una tasa de tiempo (índice * 50) en función del tiempo de espera anterior, puede hacer esto:
const { useState, useCallback, useEffect } = React; const description = "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."; const Component = () => { const [text, setText] = useState(' ') const animateText = useCallback((direction) => { const max = description.length; for (let index = 0; index < max; index++) { const startIndex = direction ? 0 : max const endIndex = direction ? index : max - index setTimeout(() => { setText(description.substring(startIndex, endIndex)) }, index * 50) } }, []) useEffect(() => { animateText(true) }, [animateText]) return text } // Render it ReactDOM.render( < Component / > , document.getElementById("react") ); #react { width: 300px; } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script> <div id="react"></div>
·
Juan Pablo Isaza
Report
Answer question