用Raphael调用requestAnimationFrame是否会受到性能影响?

时间:2012-05-09 20:39:03

标签: javascript raphael requestanimationframe

我正在研究一个资源匮乏的Web应用程序,该应用程序严重依赖Raphael.js大约50%的动画使用,其余的我已经推出了自己的动画方法,该方法使用webkitRequestAnimationFrame和Web Audio API context.currentTime将动画与音频组件同步。

我目前正在经历非常可怕的表现,并且通过Raphael的来源我看到它也使用了requestAnimationFrame。当我的动画和Raphael's同时运行时,我遇到的大部分延迟似乎都会发生。这是因为requestAnimationFrame基本上每个绘制周期被调用两次吗?

基本上我要问的是基本上我是否必须为raphael对象重新推出自己的动画实现并将其粘贴到我现有的requestAnimationFrame中?

2 个答案:

答案 0 :(得分:0)

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

根据规范:

  

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

所以我会说不,它不应该是一个性能损失。

答案 1 :(得分:0)

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

我发现我的大多数周期都是通过重新绘制来完成的。没有太多你可以做JS的方式来加速重画。但我认为你可以通过减少透明效果,过滤器和屏幕变化的大面积来简化浏览器。此外,重新绘制是您正在更新的像素数量的函数。我正在创建一个全屏网站,当我将视口大小加倍时,它会使我的绘画时间加倍。

相关问题