在 Android 上使用 KineticJS 的性能非常差 :(

Question

我有一个有 1 层的舞台，它有 100 个 kineticImage 对象（当然还有 100 个附加到它们的图像）。当我点击一个动态图像对象时，我写了一个非常简单的补间：

    var growTween = new Kinetic.Tween({
        node: that.kineticImage, 
        duration: 0.1,
        scaleX: that.kineticImage.scaleX()+0.2,
        scaleY: that.kineticImage.scaleY()+0.2
    });
    growTween.play();

您可以在以下位置查看整个示例： http://trueicecold.no-ip.org/pumpkin/demo.html

所以每张按下的图像将在 1/10 秒内增长 20%...只有1-2帧...

会不会是 100 张图片太重，Android 无法处理？我正在使用 Galaxy S3。

编辑：我也尝试了 100 个圈子：http://trueicecold.no-ip.org/pumpkin/demo2.html，结果相同...

Answer 1

移动设备上的画布明显比桌面上的画布慢。

像 KineticJS 这样在画布上赋能对象的库将明显比纯移动画布慢。

为了获得更好的性能，请尝试将补间对象临时移动到单独的图层上。

myTweeningShape.moveTo( myTweenLayer );

只有 1 个对象会在每个补间步骤中重绘，而其他 99 个对象（在另一层上）不必重绘。

然后当补间结束时，您可以再次将补间对象放回主层。

您可以将 onFinish 函数添加到补间中，该函数将在补间结束时触发。

[其他想法]

(1) 新的 Image() 太多

只需在南瓜“类”之外加载一次南瓜图像，然后使用该 1 个图像作为每个 Kinetic.Image 的图像。不要在每个 Pumpkin 中加载和保存新的 Image()。

(2) Tweens 没有被销毁，因此正在累积

Kinetic.Tween 不会在补间播放后自动销毁自己，因此请告诉每个新补间在播放后销毁自己：

var growTween = new Kinetic.Tween({
    node: that.kineticImage, 
    duration: 0.1,
    scaleX: that.kineticImage.scaleX()+0.2,
    scaleY: that.kineticImage.scaleY()+0.2
    onFinish:function(){ this.destroy(); }
});