5

我正在开发一个资源相当匮乏的 Web 应用程序,该应用程序严重依赖 Raphael.js 来处理大约 50% 的动画,其余部分我推出了自己的动画方法,它使用 webkitRequestAnimationFrame 和 Web Audio API 的 context.currentTime将动画与音频组件同步。

目前我的表现非常糟糕,通过 Raphael 的源代码,我发现它也使用了 requestAnimationFrame。我遇到的大部分延迟似乎都发生在我的动画和拉斐尔的动画同时运行时。这是因为 requestAnimationFrame 基本上每个绘制周期被调用两次吗?

基本上我要问的基本上是我是否必须为 raphael 对象重新滚动我自己的动画实现并将其与我现有的 requestAnimationFrame 一起使用?

4

2 回答 2

0

我对缓慢的 SVG 动画也有类似的问题。我对 RAF 的理解是,无论更新来自何处,它都会将更新一起批量处理,所以我认为这不是你的问题。

我发现我的大部分周期都被重新粉刷占据了。在 JS 方面,您无法加快重绘速度。但我认为你可以通过减少透明效果、过滤器和大面积的屏幕变化来让浏览器更轻松。此外,重绘是您正在更新的像素数量的函数。我正在制作一个全屏网站,当我将视口大小加倍时,我的绘制时间也会加倍。

于 2013-03-18T09:32:44.123 回答
0

嗯,据我所知,RAF 的重点是同步所有内容,以便为下一次渲染更新做好准备。我会做和你一样的事情,因为这就是重点。

根据规范:

期望用户代理以与显示刷新率相匹配的定期间隔从动画任务源运行任务。以较低的速率运行任务可能会导致动画看起来不流畅。以更高的速率运行任务可能会导致额外的计算发生而没有用户可见的好处。

所以我会说不,它不应该是性能上的打击。

于 2012-05-17T12:33:10.733 回答