Android上KineticJS的性能非常差：(

我有一个1层的舞台，有100个kineticImage对象（当然还有100个附加的图像）。当我点击一个kinetic image对象时，我写了一个非常简单的tween：

    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();

您可以在以下位置看到整个示例：

因此，每一张按下的图像在1/10秒内都会增长20%…在桌面上它工作得很好，但在android上我的性能很差…触摸启动和实际执行之间有300毫秒的延迟，两者之间只有1-2帧

可能是100张图片太重了，android无法处理吗？我用的是GalaxyS3

---

编辑：我还尝试了100个圆圈：结果是相同的…

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

而像KineticJS这样的库，在画布上授权对象的速度明显慢于纯移动画布

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

myTweeningShape.moveTo( myTweenLayer );

只有1个对象在每两步之间被重绘，其他99个对象（在另一层上）不必重绘

然后，当二者结束时，可以再次将二者对象放回主层

您可以将onFinish函数添加到tween中，tween结束时将触发该函数

[其他想法]

（1） 太多新图像（）

只需在南瓜“类”外加载一次南瓜图像，并将该1个图像用作每个Kinetic.image的图像。不要在每个南瓜内加载并保存新图像（）

（2） 吐温没有被破坏，因此正在积累

动能.Tween不会在Tween播放后自动销毁自己，因此请告诉每个新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(); }
});

---

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

而像KineticJS这样的库，在画布上授权对象的速度明显慢于纯移动画布

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

myTweeningShape.moveTo( myTweenLayer );

只有1个对象在每两步之间被重绘，其他99个对象（在另一层上）不必重绘

然后，当二者结束时，可以再次将二者对象放回主层

您可以将onFinish函数添加到tween中，tween结束时将触发该函数

[其他想法]

（1） 太多新图像（）

只需在南瓜“类”外加载一次南瓜图像，并将该1个图像用作每个Kinetic.image的图像。不要在每个南瓜内加载并保存新图像（）

（2） 吐温没有被破坏，因此正在积累

动能.Tween不会在Tween播放后自动销毁自己，因此请告诉每个新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(); }
});

---

谢谢markE，不幸的是，这没有帮助……另外，我注意到在点击南瓜8-10次后，android浏览器崩溃：（我很确定我遗漏了什么，我不敢相信KineticJS在任何浏览器上都不能处理100个元素…：/谢谢，mark，我用我们的建议更新了第一个演示链接，虽然它看起来好一点，但运行非常缓慢和不稳定：（…仍然不稳定。好吧，试试这段经过重构的代码（1）从元素容器中取消封装Kinetic.Image对象。（2）创建/销毁南瓜对象外部的tweens。（3）将任何tweened南瓜移动到tweenLayer，但在tween完成后不将其移回主层以节省处理。下一个优化步骤是“手动”进行tweening通过在requestAnimationFrame内部缩放而不是使用Kinetic的tweening）。我这么说是因为tween.destroy似乎没有完全回收tween的资源。链接：markE，那太棒了！：）现在我在android上的速度是56fps！：）只有一个侧节点，我必须放“Shared.GameGrid.draw（）；”在moveTo方法之后，因为老南瓜仍然在显示。我是否正确地假设，每个南瓜都会变大，tweenLayer会变得越来越重来渲染？但是Shared.GameGrid会变得更轻：）再次感谢！很高兴我能帮忙。是的，tweenLayer将累积节点，作为交易，主层将拥有较少的节点。祝你的项目好运！谢谢markE，不幸的是这没用。。。此外，我还注意到，在点击南瓜8-10下之后，android浏览器崩溃了：（我很确定我遗漏了什么，我不敢相信KineticJS在任何浏览器上都不能处理100个元素……。：/谢谢，马克，我用我们的建议更新了第一个演示链接，虽然它看起来好一点，但运行非常缓慢和不稳定：（…仍然不稳定。好的，尝试以下重构代码：（1）从元素容器中反封装动能.Image对象。（2）创建/销毁南瓜对象外部的tweens。（3）将任何粗花南瓜移动到粗花层，但在粗花层完成后不将其移回主层以节省处理。下一个优化步骤是通过在requestAnimationFrame内部缩放来“手动”进行粗花处理，而不是使用Kinetic的粗花处理）。我这么说是因为tween.destroy似乎没有完全回收tween的资源。Link:markE，那太棒了！：）现在我在android上的速度是56 fps！：）只有一个侧节点，我不得不在moveTo方法后加上“Shared.GameGrid.draw（）；”，因为老南瓜还在显示。但是，我是否正确地假设，每一个南瓜都会变大、变重？但是Shared.GameGrid会更轻：）再次感谢！很高兴我能帮忙。是的，tweenLayer将累积节点，作为交易，主层将拥有较少的节点。祝你的项目好运！