このTweenJSコードを説明してください。

Question

CreateJSの初心者ですが、このサンプルコードを使用していますが、コードexaplainationでコードがありません。

createjs.Tween.get(circle, { loop: true }) 
    .to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)) 
    .to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)) 
    .to({ alpha: 0, y: 225 }, 100) 
    .to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)) 
    .to({ x: 100 }, 800, createjs.Ease.getPowInOut(2)); 

誰かがステップによって私please.Stepのためにそれを説明することができます： のコードは以下のものです。

よろしくお願いいたします。

Answer 1

circleオブジェクトのトゥイーンを作成します。

createjs.Tween.get(circle, { loop: true })

トゥイーンコールは「連鎖」され、メソッドを追加することによって、それはそれらを順番に実行されますので、：それは、命令をループます。技術的には、それぞれのメソッドはトゥイーンへの参照を返しますので、束を順番に呼び出すことができます。コード内の改行は読みやすく、それは基本的に次のとおりです。

tween.to(values).to(values).to(values); 

最初のトゥイーンを1000ミリ秒のアニメーションで400ピクセルまでの円のx位置を設定します。それはカスタム値を持っているそれに容易さを持っています。詳しくはTweenJS Ease classをご覧ください。最初のアニメーション後

.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)) 

、次にわずかに異なる容易に、500ミリ秒にわたってalphaとy値を設定します。

.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)) 

残りは理にかなっています。

.to({ alpha: 0, y: 225 }, 100) 
.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)) 
.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2)); 

また、トゥイーンされていないトゥイーンターゲット上の他のプロパティを変更する機能、またはsetを呼び出すために、このようなcall()などトゥイーンの他の方法を、チェーンことができます。

var tween = createjs.Tween.get(circle, { loop: true }); 
tween.to({ x: 400 }, 1000, createjs.Ease.getPowInOut(4)); 
tween.to({ alpha: 0, y: 175 }, 500, createjs.Ease.getPowInOut(2)); 
tween.to({ alpha: 0, y: 225 }, 100); 
tween.to({ alpha: 1, y: 200 }, 500, createjs.Ease.getPowInOut(2)); 
tween.to({ x: 100 }, 800, createjs.Ease.getPowInOut(2)); 

乾杯：

ただ参考のために、これは、このような、より伝統的なものと同じです。