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％...在桌面上它工作得非常好，但在android上我的性能很差......在touchstart和实际执行之间延迟300ms，并且补间只有1-2帧...

可能是100张图片对于Android来说太重了吗？我正在使用Galaxy S3。

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

Answer 1

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

像KineticJS这样赋予画布对象的库将明显慢于纯移动画布。

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

myTweeningShape.moveTo( myTweenLayer );

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

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

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

[其他想法]

（1）新的Image（）太多了

只需在南瓜“类”之外加载一次南瓜图像，然后使用该图像作为每个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(); }
});

在Android上使用KineticJS的表现非常糟糕:(

1 个答案: