为何 Canvas 内元素动画总是在颤抖？-CSDN博客

原文：fanmingfei.com/posts/Why_T…

背景

过年的项目中遇到一个问题让我百思不得其解，明明我的帧率保持在60帧，为何我的动画却一直抖动？

我的场景是一个匀速直线运动的小姐姐。

先上一个 Demo

在这个 Demo 中，小姐姐是按照 x 轴 10px/s，y 轴 30 px/s 进行移动的，不过她的移动是明显伴随着抖动的。

这到底是怎么了呢？

解决

如果小姐姐的y轴速度是 10px/s，我们的帧率是 60f/s，计算一下：

10 / 60 = 1/6 (px/f)
复制代码

实际上，的实际速度是每 6 帧才会移动 1px，这当然会有抖动，小姐姐走一步停一会，总感觉怪怪的~

我索性把小姐姐的移动速度调快，调成 100px/s，发现，还是会抖动，以为高高兴兴能解决了这个问题，发现还是没那么简单。

既然我们能算，那我们就算一算

100 / 60 = 10/6 (px/f) = 1.666666....(px/f)
复制代码

写了个for循环，看看一秒中每一帧小姐姐都在什么位置

for(let i = 0; i < 60; i ++) {
  console.log(i*10/6)
}
复制代码

输出结果取小数点后两位是这样的：

0.00 1.67 3.33 5.00 6.67 8.33 10.00 11.67 13.33 15.00 16.67 18.33 20.00 21.67 23.33 25.00 26.67 28.33 30.00 31.67
33.33 35.00 36.67 38.33 40.00 41.67 43.33 45.00 46.67 48.33 50.00 51.67 53.33 55.00 56.67 58.33 60.00 61.67 63.33
65.00 66.67 68.33 70.00 71.67 73.33 75.00 76.67 78.33 80.00 81.67 83.33 85.00 86.67 88.33 90.00 91.67 93.33 95.00 96.67 98.33
复制代码

那么作为浮点数，Canvas 将如何定位呢？

我们来写一个 Demo

使用 Chrome 打开，作为一个像素眼，我发现，小姐姐定位在 50.6px 的时候，其实就已经被渲染到 51px 的位置。

所以在 Chrome 中，drawImage 中设置的位置最终会被四舍五入，这可能和 CSS Sub-pixel 有关这里先不探究。

所以真正的位置其实是

 0 2 3 5 7 8 10 12 13 15 17 18 20 22 23 25 27 28 30 32
 33 35 37 38 40 42 43 45 47 48 50 52 53 55 57 58 60 62 63 65
 67 68 70 72 73 75 77 78 80 82 83 85 87 88 90 92 93 95 97 98
复制代码

从数值来看，每帧移动的距离可能是 1px 也可能是 2px，小姐姐可能是在边跳芭蕾边走路喽~

既然这样，60 帧的帧率下，设置 60px/s 就可以解决问题了，尝试了一下，真的可以！