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

【问题标题】：How can I animate an accelerating a DOM element with JavaScript?如何使用 JavaScript 为加速的 DOM 元素设置动画？
【发布时间】：2021-12-30 19:45:45
【问题描述】：

我正在制作一个应用程序，我需要一个对象从 a 点移动到 b 点，开始速度很快，但随后速度变慢。我想用纯香草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++
    }
}

【问题讨论】：

您真的不需要手动实现动画。JS Web Animations API 有大量工具供您处理这项工作。是的，它被认为是 vanila JS。

标签： javascript animation

【解决方案1】：

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

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

【讨论】：

在player.style.left = a - playerWidth 行尾添加+ 'px' 时，您的代码对我有效

【解决方案2】：

使用 CSS3 功能会更好、更容易。例如，您定义了一个 CSS 类，其中包含 CSS 过渡或变换。例如

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

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

在您的情况下，您可以将 300px 设为 CSS 变量并在添加类之前在您的 javascript 中更新它

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

【讨论】：