配列をループする際にeval（）を避けるには？

Question

私はGreensockアニメーションライブラリで働いていますし、シーケンシャルアニメーション（一つのことはすぐに終了し、次の始まる場所）あなたはこのようにそれを入力する必要が構築するとき：

childTL.to($box, 1, {x:50,y:0}) 
     .to($box, 1, {x:50,y:50}) 
     .to($box, 1, {x:-50,y:50}) 
     .to($box, 1, {x:-50,y:0}); 

を私が持っている問題は、私はということですすべてのものをデータベースや変数として格納し、forループを使って段階的に物を構築する必要があります。

私は何をしたいです。このような何か：私はそれを（）はevalを行い、その後一緒に文字列を連結してそれを行うと可能性を知っているが、なしでそれを行う方法がある

var animation = { 
    "name": "movearound", 
    "sequence": [{ 
    "duration": "1", 
    "vars": { 
     "x": "50", 
     "y": "0" 
    } 
    }, { 
    "duration": "1", 
    "vars": { 
     "x": "50", 
     "y": "0" 
    } 
    }, { 
    "duration": "1", 
    "vars": { 
     "x": "50", 
     "y": "0" 
    } 
    }, { 
    "duration": "1", 
    "vars": { 
     "x": "50", 
     "y": "0" 
    } 
    }] 
} 
target = $(".target123") 
childTL = new TimelineLite{onUpdate: updateSlider}); 

for (S = 0; S < animatelayers.sequence.length; S++) { 
    duration = animatelayers.sequence[S]["duration"]; 
    sequence = animatelayers.sequence[S]["vars"]; 
    if (S == 0) { 

    childTL.to(target, duration, sequence) 
    } else { 
    .to(".target", duration, sequence); 
    } 
} 

？私はevalを話しています理由について

編集（）：

私は私が持っている悩みを推測では、それがオブジェクト対文字列として入ってくる事になるとGreensockがどのようにうるさいです - たとえば、あなたはで$("#target")を使用することができます.to（）を使用することはできますが、変数として最初に定義する場合は使用できません。var target = $("#target");、次にchildTL.to(target, 1, {x:50,y:0})は失敗しますが、var target = "#target"とするとうまくいきます。だから、過去に私はGreensockが文字列として欲しいのと全く同じように作成し、eval（）を使用しました。私はそれを続けることができますが、私は物事を達成するためのより良い方法を探すことを好む。

Answer 1

あなたのサンプルコードでは、意味がありませんので、代わりに私は、データ構造とループを使用するように、元のスニペットを変換する方法を実証するつもりです：

childTL.to($box, 1, {x:50,y:0}) 
     .to($box, 1, {x:50,y:50}) 
     .to($box, 1, {x:-50,y:50}) 
     .to($box, 1, {x:-50,y:0}); 

まず私たちは私たちのデータを定義します。

var coords = [ 
    {x: 50, y: 0}, 
    {x: 50, y:50}, 
    {x:-50, y:50}, 
    {x:-50, y: 0} 
]; 

その後、我々ループ：

var obj = childTL; 
for (var i = 0; i < coords.length; i++) { 
    obj = obj.to($box, 1, coords[i]); 
} 

これは、元の厳格な変換であるをチェーンが呼び出されます。しかし、このようなことは実際には必要ではありません。 .toメソッドは、便宜上オブジェクトを返すだけです（https://greensock.com/docs/#/HTML5/Animation/TimelineLite/to/による）。それを使用する必要はありません。

あなたは、単に言うことができます：

for (var i = 0; i < coords.length; i++) { 
    childTL.to($box, 1, coords[i]); 
}