eval（）函数不适用于全局范围

Question

我正在使用CreateJS为对象设置动画。

我想将circle移动到for循环中更改的位置。

    var x = {
        time: 200,
        x: 0,
        y: 0
    };

每当形状在for循环中设置动画后，我将更改此变量。

    for(var i = 0; i < 4; i++) {
        createjs.Tween.get(circle)
            .to({x: hits.x, y: hits.y}, hits.time);

    hits.x += 200;
    hits.y += 200;
    }

我将增量值设置为4，但是我将对其进行更改。 这就是为什么我每次给动画设置动画时都没有直接使用.to函数的原因。 我不想为每个循环的每个增量进行硬编码。 我需要制作一个可以接受任何增量值并相应地为其设置动画的函数。

我尝试了一下，但随后意识到如果正在进行另一个动画，则动画不会发生。

然后，我使用eval函数将所有值添加到字符串中，然后将其作为一个整体进行处理，因为.to()函数是可链接的。

     var bounceString = "createjs.Tween.get(circle)";
     for(var i = 0; i < 4; i ++) {
        bounceString += ".to({x: hits.x, y: hits.y}, hits.time)";

    hits.x += 200;
    hits.y += 200;
    }
    bounceString += ";";
    eval(bounceString);

通过对字符串使用eval函数，我可以使用任何增量值并相应地对形状进行动画处理，而不必对其进行硬编码。 但是，有一个问题。

我不知道为什么，但是它说hits变量是不确定的。 我也尝试在bounceString定义该变量，但没有成功。 我还尝试将其设置为全局变量（因为整个代码都在一个函数中）。

当我尝试在bounceString定义hits时显示的错误是：

仅当我尝试在字符串本身中定义变量时，才会发生这种情况。

我知道eval函数很危险，但这是唯一的方法。 我还有其他方法可以做到吗？

Answer 1

我不知道createjs的API是什么。 但是，我希望存储您从createjs.Tween.get()得到的createjs.Tween.get() ，然后执行createjs.Tween.get() .to()会比eval()为您做的任何事情都要好得多。

考虑以下代码：

// Store the tween
var c = createjs.Tween.get(circle);

// Create your keyframes
var keyframes = [],
    keyframe;

for (keyframe = 0; keyframe < 4; keyframe += 1) {
    keyframes.push({
        x: 200 * keyframe,
        y: 200 * keyframe
    });
}

// Do your iterations on tween
keyframes.reduce(function (prev, curr, i, arr) {
    return prev.to({
        x: arr[i].x,
        y: arr[i].y
    });
}, c.to({
    x: keyframes[0].x,
    y: keyframes[0].y
}));