如何使用 JavaScript 为加速的 DOM 元素设置动画？

Question

我正在制作一个应用程序，我需要一个对象从 a 点移动到 b 点，开始时速度很快，但随后变慢。我想用纯 vanilla js 来做这件事，没有任何库。这是我当前用于以恒定速度设置动画的代码，我想知道是否可以修改它或其他内容。

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++
    }
}

Answer 1

使用 CSS3 功能会更好、更容易。例如，您在 it.e.g.

中定义具有 CSS 转换或转换的 CSS class

.move{
  transform: translateX(300px);
  transition: transform .3s ease-out;
}

然后您只需使用 JavaScript 添加或删除 class 到您希望其生效的 DOM 元素。 https://jsbin.com/sosuqoyasi/edit?html,css,js,output

在您的情况下，您可以将 300px 设置为 CSS 变量并在添加 class

之前在 javascript 中更新它

如果您想在 JS 代码中更好地控制 CSS，请使用 Web 动画 API：https://developer.mozilla.org/en-US/docs/Web/API/Web_Animations_API

Answer 2

我会使用超时而不是像这样的递归间隔...

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()

这是一个工作示例

https://replit.com/@BenjaminKile/MoralRegularTransformations#index.html

如何使用 JavaScript 为加速的 DOM 元素设置动画？

How can I animate an accelerating a DOM element with JavaScript?

javascript

animation