javascript - 将数组传递给 tweenjs 将不起作用

Question

我想使用 tween.js 为多个屏幕对象设置动画。

这些对象被组织在一个数组中，我想将每个单独的元素传递给补间函数，该函数大致如下:http://jsfiddle.net/8L9Dz/

var target1 = document.getElementById( 'target1' );
var target2 = document.getElementById( 'target2' );

targets.push(target1);
targets.push(target2);

for(var i = 0; i < 2;i++ ){
    var tween = new TWEEN.Tween( targets[i].dataset )  // i'th element
        .to( { rotation: 360, y: 300 }, 750 )
        .easing( TWEEN.Easing.Cubic.InOut )
        .onUpdate( function() {
            updateBox( targets[i], this );
        })
        .start();
}

当我在本地运行代码时，Firefox 告诉我“盒子未定义” - 这对应于 updateBox(...) 中的第一行

我猜这与函数的关闭有某种关系，但我不是 JavaScript 专家 - 有人知道吗？

Answer 1

尝试按如下方式重写代码以避免循环变量的闭包绑定(bind):

var tween = new TWEEN.Tween( targets[i].dataset )  // i'th element
    .to( { rotation: 360, y: 300 }, 750 )
    .easing( TWEEN.Easing.Cubic.InOut )
    .onUpdate( (function(id, ctx) { 
        return updateBox(targets[id], ctx); 
    })(i, this) )
    .start();

更新:

onUpdate 应该接收一个函数作为参数，我错过了。请尝试如下:

...
.onUpdate( (function(id, ctx) { 
        return function() { updateBox(targets[id], ctx) }; 
    })(i, this) )
...

更新2:

this 不应传递给 onUpdate，因此请尝试以下操作:

var tween = new TWEEN.Tween( targets[i].dataset )  // i'th element
              .to( { rotation: 360, y: 300 }, 750 )
              .repeat(Infinity)
              .easing( TWEEN.Easing.Cubic.InOut )
              .onUpdate( (function(id) { 
                return function () { updateBox(targets[id], this); };
              })(i) )
              .start();

注意:在您的 .zip 中，您没有在 Tween 构造函数中使用 Targets[i].dataset，请注意