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

Question

我正在制作一个应用程序，其中我需要一个对象从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++
}
}

Answer 1

这会更好&更易于使用CSS3功能。例如，您定义了一个CSS类，其中包含CSS转换或转换。例如

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

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

在您的情况下，您可以将300px设置为CSS变量，并在添加类之前在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/MoraleRegularTransformations#index.html