我正在制作一個應用程式，我需要一個物件從 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
}
}
uj5u.com熱心網友回復：
我會使用超時而不是像這樣遞回的間隔......
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/@BenjaminKi??le/MoralRegularTransformations#index.html
uj5u.com熱心網友回復：
使用 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
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/402150.html
標籤：javascript 动画片