javascript - 使用animationFrame制作抖动动画

标签 javascript requestanimationframe

我根据 Windows 8 加载动画制作了一个简单的小微调器小部件,但我一直无法弄清楚为什么每个点似乎都会轻微抖动。我尝试了各种方法来标准化这些值,但没有找到任何可以平滑它的方法。

http://jsbin.com/ilafov/16

我做错了什么?

最佳答案

我有一种预感并拍摄了屏幕截图来确定。您的动画似乎没有执行任何子像素动画。

要使动画真正平滑,要逐个像素地移动,您不能只是从一个像素跳到另一个像素,而是想象它按平均值移动。像素慢慢地移出一个空间并进入下一个空间。您可以通过像素逐渐淡出而另一个像素淡入来模拟这一点。

当我对你的动画进行屏幕截图时,我看到所有点都没有子像素动画的迹象。

如果您查看我的业务页面:http://matthewrconsultancy.co.uk/start如果您使用 Chrome 之类的工具,您会看到齿轮在移动。它使用 SVG 和 SMIL 动画,但如果放大查看,您会发现动画是在子像素级别上发生的。恐怕我现在还没有时间弄清楚如何为您修复它,但我可以直接回答您的主要问题:出了什么问题。

关于javascript - 使用animationFrame制作抖动动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13316944/

相关文章:

javascript - 部分 jQuery 的回调处理撤消了我的声明

animation - 双 requestAnimationFrame 是如何工作的?

javascript - 使用 Raphael 调用 requestAnimationFrame 是否会影响性能?

javascript - 如何在 requestAnimationframe 循环中的 2 点之间进行插值

javascript - 有没有使用 JavaScript 按值从 <select> 获取 <option> 的快速方法?

javascript - 即使设置了过渡,CSS 动画也不会顺利返回

javascript - 如何使用 CSRF 测试 express form post?

javascript - 多项选择不突出元素

javascript - requestAnimationFrame 附加到 App 对象而不是 Window

javascript - 如何在带有参数的函数内部使用 requestAnimationFrame ?