我在让 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 闭包的文章:
How do JavaScript closures work?
KineticJS 支持无限数量的动画(当然，直到内存耗尽)
关于javascript - 是否可以在单个层上拥有多个 KineticJS 动画？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12699369/