我只是重新实现了我正在使用KineticJS的音乐应用程序的组件,而不是使用DOM元素和一些JQuery动画完成的原型GUI。起初,我很高兴看到Chrome的帧率略有提高10-15%,但随后在iPad 2上进行了测试,我估计与DOM版本的30fps相比,我估计约为6fps。

我一定做错了什么。我希望。

组件为1000x300,分为2层。一种是静态背景,另一种是〜150个形状,大多数形状约为20-30像素,其中一些沿着画布的长度延伸。动画使用Kinetic.Tween同时对不透明度和宽度进行动画处理。大多数形状只是圆形,尺寸较小。没有任何内容被缓存,但是它看起来如此之少而且如此简单,以至于我不会想到如此缓慢(我估计大约会以6 fps的速度观看)。我正在为单个笔记创建新的Tween实例,并且可以使用池,因为总对象数是恒定的,但是我感到惊讶的是,仅此一项会导致速度变慢。凭直觉,我怀疑其推动像素到底是什么问题?

该应用程序使用WebAudio和JQuery UI来处理按钮之类的简单小部件,但在DOM实现中至少具有30 fps,且音频相同,其他所有功能相同。

使用Tweens,渲染循环的默认行为是什么?我在文档中看不到指定所需帧率的方法。 Kinect.Animation看起来可以提供更好的纹理控制,但是在我的情况下,这需要太多状态,因为动画都是脉冲事件,它们会在0.5-1.2秒内消失。由于某些原因,不透明度进行动画制作是否极其昂贵?我的静态背景层是否由于未缓存为图像而引起任何问题?

抱歉,没有显示代码。我可以创建一个jsfiddle,但我希望上面的描述中有明显的提示,我应该做些不同的事情。

哦,我不是在看动画对象。从初始化时间起,它们就全部放在数组中。同样,不会以为是问题。

最佳答案

由于没有人敢于评论我的重要问题,因此我将发布答案。我不确定,但是我相信我的代码的第一个版本没有正确设置HTML中的视口缩放比例,从而导致了非GPU缩放的画布,从而导致可怕的帧速率。

如果其他人遇到类似问题,则可能是您忘记了将其添加到HTML的HEAD中:

<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">

尽管还有其他设置缩放比例的选项,但我更喜欢这样做,然后在我的应用代码中进行任何自定义屏幕宽度缩放。

ps。现在,我在使用KinectJS的老化iPad 2上可以健康地以40-50fps的速度播放很多动画透明的淡入淡出效果。

10-06 11:44
查看更多