使用animationFrame的動畫動畫

Question

我掀起了一個基於Windows 8加載動畫的簡單的小型微調控件，我還沒有弄清楚爲什麼每個點都會略微抖動。我嘗試了各種方法來規範化值，並沒有找到任何能夠使其平滑的東西。

http://jsbin.com/ilafov/16

我在做什麼錯？

Answer 1

我有一個預感和屏幕拍攝是肯定的。您的動畫似乎沒有做任何子像素動畫。爲了使動畫真正平滑，要將像素移動一個像素，您不僅可以從一個像素跳到另一個像素，而且可以將它想象爲平均移動。像素緩慢移出一個空間並進入下一個空間。你可以通過逐漸淡出像素來模擬其他像素。

當我屏幕拍攝動畫時，我看到所有沒有子像素動畫符號的點。

如果你看看我的商業頁面：http://matthewrconsultancy.co.uk/start，如果你使用類似Chrome的東西，你會看到移動的齒輪。它使用SVG和SMIL動畫，但是你會看到，如果你看看它放大了動畫發生在子像素級別。恐怕我沒有時間弄清楚如何爲你解決問題，但我可以直接回答你的問題。

Answer 2

一些選項：

1）嘗試使用畫布爲圓圈設置動畫。在初始化期間，您可以繪製一個圓到屏幕外畫布，並將其imageData（使用getImageData）保存到一個易於訪問的變量。在動畫的每個幀中，將putImageData用作主動畫畫布上各個座標中的圓圈數量。只要記住清除它每一個新的框架。

2）將您的圈子保存爲獨立於分辨率的圖像（SVG，CSS樣式或具有API的Canvas，根據用戶的屏幕DPI和瀏覽器自己顯示的像素更新其上下文）。然後可以嘗試使用transform：translate3d（x，y，z）來移動圓。這可能會提供更平滑的結果，儘管我聽說此轉換啓用的硬件加速可以防止瀏覽器在某些元素上使用子像素消除鋸齒。另請注意，transform屬性使用供應商前綴。

希望這會有所幫助！