单层上是否可以有多个 KineticJS 动画？答案

【问题标题】：Is it possible to have multiple KineticJS animations on a single layer?单层上是否可以有多个 KineticJS 动画？
【发布时间】：2012-09-23 20:13:10
【问题描述】：

我在让 KineticJS 动画停止 () 时遇到问题。

我在同一层上有三个 KineticJS 图像对象，并且我为每个 KineticJS 图像对象添加了一个 KineticJS 动画。然而，只有一个图像对象显示任何动画。它也不会停止响应 anim.stop() 的动画，除非我 stop() 所有三个对象的动画（包括那些实际上没有视觉动画的对象）。

我的问题是：是否甚至可以在单独的对象/图像/形状上添加多个独立动画到单个图层，并且仍然能够单独启动（）/停止（）每个动画？还是我需要为每个 KineticJS 图像对象创建一个单独的层？

简而言之（破解版），我的代码如下：

stage = new Kinetic.Stage({container: "container", width: windowWidth, height: windowHeight});

layer = new Kinetic.Layer();

var kinObjArr = [];

for (var i=0; i < 3; i++) {
    kinObjArr[i] = new Kinetic.Image({image: myHTMLImage});

    kinObjArr[i].anim = new Kinetic.Animation({
        func: function(frame) {
            kinObjArr[i].setX(30 * Math.sin(frame.time * 2 * Math.PI / 500) + 100);
        },
        node: layer
    });

    kinObjArr[i].anim.start();

    kinObjArr[i].on('touchstart', function(){
        this.anim.stop();    // <----- Doesn't stop
        layer.draw();
    });

} // for

stage.add(layer);

基本上只有列表中的最后一个 KineticJS 图像会被动画化，并且只有在所有 3 个图像都被触摸/点击后才能停止。

【问题讨论】：

标签： javascript animation html5-canvas layer kineticjs

【解决方案1】：

经典的闭包问题。您需要使用匿名函数来诱导作用域，或者将所有逻辑分解为自己的函数。这是一篇关于 Javascript 闭包的文章：

How do JavaScript closures work?

KineticJS 支持无限数量的动画（当然，直到内存不足）

【讨论】：

【解决方案2】：

感谢埃里克的回复。我读了那篇文章，它让我的头变形了，但我想我最终明白了。我选择了你的第二个选项，它就像一个魅力：

（同样，这是我实际代码的破解版本，尚未测试此 sn-p）

stage = new Kinetic.Stage({container: "container", width: windowWidth, height: windowHeight});

layer = new Kinetic.Layer();

var kinObjArr = [];

function myFunc(i) {
    kinObjArr[i] = new Kinetic.Image({image: myHTMLImage});

    kinObjArr[i].anim = new Kinetic.Animation({
        func: function(frame) {
            kinObjArr[i].setX(30 * Math.sin(frame.time * 2 * Math.PI / 500) + 100);
        },
        node: layer
    });

    kinObjArr[i].anim.start();

    kinObjArr[i].on('touchstart', function(){
        this.anim.stop();    // <----- Stops now
        layer.draw();
    });
} // function myFunc


for (var i=0; i < 3; i++) {
    myFunc(i);
} // for

stage.add(layer);

【讨论】：