Actualmente estoy trabajando con lienzo, muevo un objeto de izquierda a derecha perfectamente a través de esta función de aceleración:

 export const easeInQuad = (t, b, c, d) => { return c * (t /= d) * t + b; };

Paso como parámetro lo siguiente: tiempo transcurrido (ms), valor inicial (px), cambio total (comienzo - finalización en px), duración total (ms)

Funciona perfectamente en los dos lados, EXCEPTO cuando cambia el lado, hace un doble guión.

¿Ensucio algo?

Aquí es donde encontramos la función: https://riptutorial.com/es/html5-canvas/example/18488/easing-using-robert-penners-equations

Aquí está la función de animación completa:

 requestAnimationFrame(animate); function animate(time) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); ctx.beginPath(); for (let [playerKey, player] of Object.entries(room.players)) { beginningValue = cache[playerKey].x * areaX; endingValue = room.players[playerKey].x * areaX; totalChange = endingValue - beginningValue; let height = 0; if (playerKey === "p" + (local.playerID + 1)) { height = canvasHeight - paddleHeight; ctx.fillStyle = "#56dbd4"; } else { ctx.fillStyle = "#d86ef0"; } if (!startTime) { startTime = time; } let elapsedTime = Math.min(time - startTime, totalDuration); let easedX; console.log(beginningValue + " --- to --- " + endingValue); if (endingValue > beginningValue) { easedX = easeInQuad( elapsedTime, beginningValue, totalChange, totalDuration ); } else if (endingValue < beginningValue) { easedX = easeInQuad( elapsedTime, endingValue, totalChange, totalDuration ); } else { easedX = endingValue; } if (easedX > endingValue) { easedX = endingValue; } ctx.rect(easedX - paddleWidth / 2, height, paddleWidth, paddleHeight); ctx.fill(); if (time < startTime + totalDuration) { requestAnimationFrame(animate); } } }