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