Estoy creando una aplicación en la que necesito que un objeto se mueva del punto a al punto b, comenzando rápido pero luego disminuyendo la velocidad. Quiero hacer esto con pure vanilla js y sin bibliotecas en absoluto. Este es mi código actual para animar algo a una velocidad constante y me preguntaba si era posible modificarlo o algo así.
let player = document.querySelector('.player'); var id = setInterval(frame, 1); let counter = 0; function frame() { if (counter == 50) { clearInterval(id); counter = 0; return; } else { player.style.top = player.offsetTop - 2 + 'px'; counter++ } }Sería mejor y más fácil usar las capacidades de CSS3. Por ejemplo, define una clase CSS que tiene transición CSS o transformación en ella.
.move{ transform: translateX(300px); transition: transform .3s ease-out; }luego simplemente agrega o elimina la clase usando JavaScript al elemento DOM que desea que tenga efecto. https://jsbin.com/sosuqoyasi/edit?html,css,js,salida
En su caso, puede hacer que 300px sea una variable CSS y actualizarla en su javascript antes de agregar la clase
si desea tener más control sobre el CSS en su código JS, use la API de animación web: https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API
Usaría un tiempo de espera en lugar de un intervalo con alguna recursión como esta...
let player = document.getElementById("player") let a = 0 const b = 500 const playerWidth = 50 animate = () => { a += 20 setTimeout(() => { if (a < b - playerWidth) { animate() } player.style.left = a }, a) } animate()aquí hay un ejemplo de trabajo
https://replit.com/@BenjaminKile/MoralRegularTransformations#index.html