我們有xwhich 代表一個活躍值，y代表我們希望前者達到的值（可能是十進制和/或負數），z描述了前者追逐后者的速度。該代碼是在一個區間跑去，每次迭代是為了獲取的值x越接近y由z量的基礎上，未來價值如何或落后于它的目標。目標值可以在迭代之間更改為任何其他值。
舉個簡單的例子：如果當前值是 0，我們插入的目標值是 1，而時間可能是默認值 1。結果應該是這樣的：
Iteration 0: x = 0
Iteration 1: x = 0.5
Iteration 2: x = 0.75
Iteration 3: x = 0.875
Iteration 4: x = 0.9375
x永遠不會真正達到 1 是好的，因為會有一些停止的閾值，例如：if(Math.abs(y - x) < 0.125) x = y。我主要有一個數學問題，即讓 x 以彎曲的方式追趕 y（越接近它越慢）。我嘗試簡單地使用x = (x y) / 2which 可以根據需要平滑地使值更接近，但我不確定它是如何處理負數或插入z的位置以便我也可以控制速度。
uj5u.com熱心網友回復：
您可以在每次迭代中使用此公式：
x = (target - x) * speed;
let x = 0;
let speed = 0.5;
let target = 1;
const THRESHOLD = 0.001;
while(Math.abs(x - target) > THRESHOLD) {
x = (target - x) * speed;
console.log(x);
}這是使用此技術的示例：
顯示代碼片段
let targetX = 0, targetY = 0;
let x = 0, y = 0;
const box = document.querySelector('.box');
let speed = 0.1;
document.body.addEventListener('mousemove', ({x, y}) => {
[targetX, targetY] = [x, y];
});
const tick = () => {
x = (targetX - x) * speed;
y = (targetY - y) * speed;
box.style.left = `${x}px`;
box.style.top = `${y}px`;
requestAnimationFrame(tick);
}
requestAnimationFrame(tick);body {
height: 100vh;
}
.box {
width: 4px;
height: 4px;
background-color: red;
position: absolute;
}<div class="box"></div>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/353638.html
標籤：javascript