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));
乾杯:
ただ参考のために、これは、このような、より伝統的なものと同じです。
説明のために@Lannyさんに感謝します。私は今、概念をかなり良くすると思います。 – Jakamollo