5

Estoy aprendiendo a hacer animaciones con JavaScript puro. Básicamente lo que quiero es esto: Que luego de 5 segundos un número se incremente (a velocidad rápida) desde 0 hasta 300, luego de otros 5 segundos de espera, que este mismo número se incremente hasta 600, y luego de 5 segundos mas de espera, que este numero se incremente finalmente a 900... Con esto intento aprender a crear la velocidad de animación y el delay sin jQuery.

Más o menos lo he conseguido, pero con un código horrible. Lo pondré para que lo vean y por favor espero que me muestren como ustedes lo harían más resumido o cómo podría mejorar lo que he hecho.

Lean mi código desde abajo hacia arriba. Primero el setTimeout, luego las funciones uno, dos y tres:

var i = 0;

function tres() {
  alert(900)
}

function dos() {
  function two() {
    if (i > 600) {
      clearInterval(this)
    } else {
      console.log(i++)
    }
  }
  setInterval(two, 13); //velocidad de animacion
  setTimeout(tres, 5000) //tercer delay
}

function uno() {
  function one() {
    if (i > 300) {
      clearInterval(this) //detiene el incremento cuando llega a 300
    } else {
      console.log(i++)
    }
  }
  setInterval(one, 13); //velocidad de animacion
  setTimeout(dos, 5000) //segundo delay
}

setTimeout(uno, 5000) //primer delay

11
  • 1
    Por curiosidad, ¿cuál es el objetivo? No termino de ver qué es lo que intentas hacer con esto exactamente.
    – Alvaro Montoro
    Commented el 23 jun. 2018 a las 20:43
  • Hola. Es para hacer el principio basico de una animacion. Por ejemplo un deslizador de imagenes, necesita que un contenedor se mueva a la izquierda unos 300px, y que se detenga un tiempo para que lo lean o vean, y luego se vuelve a mover, hasta que termina con todas las imagenes y se repite el ciclo.
    – user91858
    Commented el 23 jun. 2018 a las 21:03
  • 1
    Ahora veo lo que intentas hacer. ¿Has pensado en usar una combinación de JS y CSS para eso? Entonces, en lugar de usar setInterval cambiarías la clase o el valor de CSS lo que causaría una transición más suave y limpia. Incluso podría hacerse sólo con CSS sin necesidad de JS.
    – Alvaro Montoro
    Commented el 23 jun. 2018 a las 21:06
  • 1
    Se hacerlo con CSS3 y JQUERY (tengo nivel avanzado en esas dos tecnologias). Pero se me ha metido en la cabeza abandonar el jquery para que mis paginas sean aun mas ligeras, para lo que necesito perfeccionarme en java script puro. Y eso lo que esto haciendo, pero me esta costando imitar el "delay" de jquery.
    – user91858
    Commented el 23 jun. 2018 a las 21:10
  • 2
    Ahí quería llegar. Actualizar el valor de left o right de ese modo es ineficiente y va a darte como resultado una animación poco limpia (puede verse a saltos, o si el usuario interactúa con la página puede ver retraso porque el JavaScript está bloqueando). Por eso te decía de usar JavaScript puro combinado con CSS o CSS directamente.
    – Alvaro Montoro
    Commented el 23 jun. 2018 a las 21:28

1 respuesta 1

1

El código que tienes va a funcionar, pero puede presentar algunos problemas:

  • Los tiempos que se le pasan a setTimeout y setInterval son relativos. Cuando le dices al navegador que quieres que una función se ejecute en 5000 ó 13 milisegundos, eso no quiere que se vaya a ejecutar en 5000 ó 13 milisegundos. Puede darse el caso de que se ejecute más tarde si el navegador está ocupado realizando otras operaciones (fuente).
  • El navegador se está inundando con operaciones a realizar por los setTimeout y setInterval, lo que puede dar problemas si se quiere ejecutar otra función (no sólo la lógica de la animación, sino también potencialmente otras funciones).
  • La duración de la animación y la distancia/movimiento a realizar pueden no ajustarse al tiempo de refresco de pantalla (el número de marcos/frames que se dibujan por segundo o fps) haciendo que se vean saltos o parpadeos indeseados.

Estos motivos pueden hacer que la animación que quieres no se vea bien: se ejecute a trompicones o dure más de lo esperado. No dando una buena experiencia de usuario o dando diferentes experiencias a diferentes usuarios.

Debido a esas limitaciones y problemas potenciales, se diseño una nueva API web: requestAnimationFrame, que permite ejecutar código cuando se vaya a refrescar/dibujar el marco en la pantalla. De ese modo se usan mejor los recursos del sistema, y las animaciones se ajustarán mejor a los fps y se verán más fluidas y mejor.

jQuery usa requestAnimationFrame para sus animaciones desde la versión 3. Se usaba también en versiones antiguas de jQuery (1.6), pero tuvieron que dejarlo de usar temporalmente (a partir de 1.6.3) por problemas de compatibilidad que fueron resueltos en esta última versión (fuente).

La animación que menciones en los comentarios puede hacerse con requestAnimationFrame (fíjate que sigo usando setTimeout para algunas cosas, limitando requestAnimationFrame para la animación en sí):

var i = 0;

var requestAnimationFrame = window.requestAnimationFrame ||
                            window.mozRequestAnimationFrame || 
                            window.webkitRequestAnimationFrame || 
                            window.msRequestAnimationFrame;
window.requestAnimationFrame = requestAnimationFrame;

// función que mueve el elemento indicado de derecha a izquierda desde la posición indicada en el tiempo dado
function moverIzquierda(objeto, tiempo, distanciaInicial, distanciaFinal) {
  
  // guardamos el tiempo inicial de la animación
  let start = window.performance.now();
  // calculamos la distancia que queremos mover
  let distancia = distanciaFinal - distanciaInicial;
  
  // la función que se ejecutará mientras haya una animación
  function animacion(timestamp) {
    // calculamos cuánto tiempo ha pasado
    var progreso = timestamp - start;
    // actualizamos la posición adecuada
    objeto.style.left = (-Math.min(distanciaInicial + distancia * progreso/tiempo, distanciaFinal)) + "px";
    // si no ha terminado la animación
    if (progreso < tiempo) {
      // pedimos que se ejecute el siguiente paso de la lógica de animación
      requestAnimationFrame(animacion);
    }
  }
  
  // lanzamos la animación
  requestAnimationFrame(animacion);
}

var imagenes = document.getElementById("imagenes");

// la primera imagen se verá 2 segundos antes de ejecutar la animación
setTimeout(function() { moverIzquierda(imagenes, 3000,   0, 300) }, 2000);
// la segunda imagen se verá 2 segundos antes de ejecutar la animación siguiente
setTimeout(function() { moverIzquierda(imagenes, 3000, 300, 600) }, 7000);
#scroller {
  width: 300px;
  height: 100px;
  position: relative;
  border: 1px solid black;
  overflow: hidden;
  box-sizing: border-box;
}

#scroller #imagenes {
  width: 900px;
  height: 100px;
  position: absolute;
  top: 0;
  left: 0;
}

#scroller #imagenes img {
  display: inline-block;
  float: left;
}
<div id="scroller">
  <div id="imagenes">
    <img src="https://placehold.it/300x100/ff0000/ffffff/" alt="" />
    <img src="https://placehold.it/300x100/00ff00/ffffff/" alt="" />
    <img src="https://placehold.it/300x100/0000ff/ffffff/" alt="" />
  </div>
</div>


Más información y temas relacionados:

2
  • Vaya con eso se compica mas no? o sea tengo que aprenderme, por asi decirlo, una nueva sintaxis... Mejor creo que me quedo con Jquery. Aparte veo que tienes que agregar los prefijos para cada navegador, en cambio JQ soporta todos los navegadores.. Ahora entiendo porque se invento JQUERY. Aparte de para simplificar el codigo, por una cuestion estetica
    – user91858
    Commented el 27 jun. 2018 a las 19:16
  • Podrías crear una función que lo simplifique, podrías hacerlo en pocas líneas de código y así no tendrías que importar todo el fichero completo de jQuery. Yo era de usar mucho jQuery, hasta que me di cuenta que básicamente lo usaba sólo por los selectores y por AJAX. 100KB para algo que se puede conseguir en menos de 1KB de código (+CSS).
    – Alvaro Montoro
    Commented el 27 jun. 2018 a las 20:11

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.