ios - KineticJS 在 iPad 2 上非常慢

Question

我刚刚重新实现了我正在开发的音乐应用程序的一个组件，以使用 KineticJS 而不是我的原型(prototype) GUI，所有这些都使用 DOM 元素和一些 JQuery 动画完成。起初，我很高兴看到 Chrome 中的帧率有 10-15% 的适度提高，但后来在 iPad 2 上进行了测试，我估计与 DOM 版本大约 30fps 相比，我估计大约 6fps。

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

组件为 1000x300，有 2 层。一个是静态背景，另一个有大约 150 种形状，大部分大小约为 20-30 像素，少数与 Canvas 长度相同。动画使用 Kinetic.Tween 同时对不透明度和宽度进行动画处理。大多数形状只是圆形，尺寸很小。没有缓存任何内容，但这看起来太少太简单了，我没有预料到会出现这种迟缓(我估计我看到的是 6 fps 左右)。我正在为单个笔记创建新的 Tween 实例，并且可以改为使用池，因为总对象数是恒定的，但如果仅此一项就导致速度如此缓慢，我感到很惊讶。凭直觉，我怀疑它插入像素是某种问题？

该应用程序将 WebAudio 和 JQuery UI 用于简单的小部件(如按钮)，但至少有 30 fps 的 DOM 实现具有相同的音频，相同的一切。

对于 Tweens，渲染循环的默认行为是什么？我在文档中看不到指定所需帧率的方法。 Kinect.Animation 看起来它提供了更精细的粒度控制，但在我的情况下，这需要太多的状态，因为动画都是脉冲事件，会在 0.5-1.2 秒内消失。出于某种原因，不透明度的动画制作成本非常高吗？我的静态背景层是否因未缓存为图像而导致任何问题？

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

哦，我不是在查找动画对象；它们都从初始时间开始就保存在数组中。同样，我认为这不是问题所在。

Answer 1

由于没有人敢于对我的重要问题发表评论，我将发布一个答案。我不确定，但我相信我的代码的第一个版本没有正确设置 HTML 中的视口(viewport)缩放，导致非 GPU 缩放的 Canvas 和糟糕的帧率。

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

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

虽然还有其他设置比例的选项，但我更喜欢这个，然后在我的应用程序代码中进行任何自定义屏幕宽度缩放。

附言。我现在使用 KinectJS 在我老化的 iPad 2 上拥有一个健康的 40-50fps 和许多动画透明淡入淡出等等。