requestAnimationFrame無法正常工作

Question

我有一個腳本的問題，我不明白會發生什麼事情。

這：

let angle = 0 
let multiplier = .01 

function raf() { 

    if(angle >= 1 || angle < 0) { 
    multiplier = - multiplier 
    } 

    angle = angle + multiplier 

    if(angle < 0) console.log(angle) 

    requestAnimationFrame(raf) 
} 

requestAnimationFrame(raf) 

的目的是通過0.01提高角和當它達到圖1，應當減少到0，然後重新提高到1。

我有時會收到一個負角度（-8.etc），我不明白爲什麼（console.log應該顯示）。

我爲那筆：https://codepen.io/mourtazag/pen/QvjjLy

謝謝大家！

Mourtaza。

Answer 1

你不角收到-8，您收到-8.XXXXXXe-17。最後注意e-17。這是科學記數法，所以你的號碼實際上是-0.00000000000000008XXXXX。您可以使用angle.toFixed(20)查看沒有科學計數的浮點數。數字是您要顯示的小數位數。

爲什麼你會得到如此小的數字，如果你只是增加和減少0.01？你可以問。發生這種情況是因爲浮點數不準確，因爲小數不可能被「保存到最後」，而不是整數。例如，請考慮1/3具有無限數量的小數。在這裏，您可以閱讀更多關於JavaScript和浮點精度的信息：Dealing with float precision in Javascript

另一個問題是具有負角（儘管您實際檢查負角度，但仍然很小，但仍爲負值）。發生這種情況是因爲您在增加/減少它之前檢查負角度，所以如果您的乘數爲負數，並且您的角度爲，比如0.0001whatever（因爲浮點精度問題），它仍然高於零，因此您的乘數爲仍然是負值，但實際上大於你的角度，所以當應用乘數時，角度將爲負值。

我能想到的這種方式來解決這個問題：

let angle = 0 
let multiplier = .01 

function raf() { 

    angle = angle+multiplier; 

    if(angle > 1 || angle < 0) { 
    multiplier = -multiplier 
    angle = angle<0?0:1; 
    } 
    console.log(angle.toFixed(20)) 

    requestAnimationFrame(raf) 
} 

requestAnimationFrame(raf) 

有了這個，你檢查你的角度是極限后里面做這個工作，所以你會克服精度問題：https://codepen.io/anon/pen/eWppGy

另一種方式可以是打算用它工作，這樣當使用一個整數（因爲他們沒有精度問題，正如我上面所述），併除以100的角度：

let angle = 0 
let multiplier = 1 

function raf() { 

    angle = angle+multiplier; 

    if(angle >= 100 || angle <= 0) { 
    multiplier = -multiplier; 
    angle = angle<=0?0:100; 
    } 
    console.log(angle/100) 

    requestAnimationFrame(raf) 
} 

requestAnimationFrame(raf) 

筆：https://codepen.io/anon/pen/XRmmVq

Answer 2

你有不幸的浮點運算的情況下，你減去0.01越來越多的時間，以便在年底，而不是做0.01

0.94 - 0.01 
0.9299999999999999 

這些錯誤可能加劇 - 0.01會得到0，碼而是做類似

0.009999999999999247 - 0.01 

這是稍微負面的。如果你需要這樣做的話，你可能只需要用Math.max（0，yourValue）和Math.min（1，yourValue）來限制min和max。

Answer 3

這是一個浮點問題

var a = 0; 
 
for (var i = 0; i < 100; ++i) { 
 
    a += 0.01; 
 
} 
 
console.log(a); 
 
for (var i = 0; i < 101; ++i) { 
 
    a -= 0.01; 
 
} 
 
console.log(a); 
 
a += 0.01; 
 
console.log(a);

打印

1.0000000000000007 
-0.010000000000000087 
-8.673617379884035e-17 

考慮使用整數或時鐘和計算從這些

Answer 4

偏題：一種不同的角度。作爲通過時間的函數而不是漸進式更改。

let start = Date.now(); 
 
let speed = 1/10000; //1 in every 10 seconds 
 

 
function raf() { 
 
\t let v = (Date.now() - start) * speed; 
 
\t let angle = v&1? 1-v%1: v%1; 
 
\t \t 
 
\t document.body.textContent = "Angle: " + angle.toFixed(3); 
 
\t requestAnimationFrame(raf); 
 
} 
 

 
//or with some sugar: 
 
speed = 180/10000; 
 
function raf() { 
 
    let minAngle = -90, maxAngle = 90, delta = maxAngle - minAngle; 
 

 
\t let v = (Date.now() - start) * speed; 
 
\t let angle = (v/delta)&1? maxAngle-v%delta: minAngle + v%delta; 
 
\t \t 
 
\t document.body.textContent = "angle: " + angle.toFixed(3); 
 
\t requestAnimationFrame(raf); 
 
} 
 

 
raf();

或與一些糖;當我們不是在談論一個範圍0到1

let start = Date.now(); 
 
let speed = 180/10000; 
 
let minAngle = -30, maxAngle = 45; 
 

 
function raf() { 
 
\t let delta = maxAngle - minAngle; 
 
\t let v = (Date.now() - start) * speed; 
 
\t let backwards = (v/delta)&1; 
 
\t let angle = backwards? maxAngle - v%delta: minAngle + v%delta; 
 

 
\t document.body.textContent = "angle: "+ angle.toFixed(3) +", direction: " + (backwards? "backward": "forward"); 
 

 
\t requestAnimationFrame(raf); 
 
} 
 

 
raf();