Animación con javascript
Problema:
Como puedo hacer una animación con Javascript
Siempre que se puede es recomendable usar las transiciones con estilos CSS. Pero a veces esto no es suficiente o resulta muy complejo.
Por ejemplo un sistema que muestre las palabras letra a letra o un carrusel son ejemplos que con CSS o no se pueden hacer o resultan excesivametne complejos.
Solución
Javascript es capaz de ejecutar instrucciones de forma repetitiva o con retrasos programados.
Si no es posible hacer la animación con transiciones CSS o el canvas es demasiado para lo que buscamos podemos usar las funcitona de tiempo de Javascript: setTimeout() y setInterval().
Ambas pueden usar tres atributos
Nombre de la función a ejecutar (función callback )
Retraso para iniciar la ejecución o intervalos d elas repeticiones
Argumentos para la función callback
La diferencia es que setTimeOut() solo actúa una vez y setInterval() realiza la acción de forma repetitiv, a intervalos.
Ejemplo
El fundamento es llamar a la función de manera repetida.
<div id="caja"></div>
<script>
let titulo = "Frase de muestra";
let letras = titulo.split('');
let cuadro = document.getElementById('caja');
setTimeout(nuevaLetra, 200, letras);
function nuevaLetra(letras){
cuadro.innerHTML += letras.shift();
if(letras.length !== 0)
setTimeout(nuevaLetra, 200, letras);
}
</script>
Este ejemplo colocará en el bloque caja el texto Frase de muestra letra a letra, con intervalos de 200 milisegundos. Como ves setTimeout se tiene que llamar a si mismo para continuar la animación.