投稿日: 2012年07月02日(2013年01月12日更新)

CreateJSに含まれるMovieClipやEaselJSのオブジェクトにトゥイーン機能を提供するライブラリ「TweenJS」の紹介です。

目次

「Toolkit for CreateJS」で書きだしたMovieClipにトゥイーンを設定するサンプルコードです。

// 主要なライブラリ
<script src="easeljs-0.5.0.min.js"></script>
<script src="tweenjs-0.3.0.min.js"></script>
<script src="movieclip-0.5.0.min.js"></script>
// Toolkit for CreateJSで書きだしたjs
<script src="kuma_motion.js"></script>
<script>
document.addEventListener('DOMContentLoaded',function(){
  var canvas, stage, target;

  // Canvasにムービークリップを表示させる
  canvas = document.getElementById("canvas-sample");
  target = new lib.kuma_motion();
  target.x = 100;

  stage = new createjs.Stage(canvas);
  stage.addChild(target);
  stage.update();

  createjs.Ticker.setFPS(24);
  createjs.Ticker.addListener(stage);

  // ボタンがクリックされたらトゥイーン開始
  document.getElementById("btn-sample").addEventListener('click', function(){
    // TweenJSはこの部分
    createjs.Tween.get(exportRoot)
    .to({x:0})
    .to({x:100}, 2000);
  });

});
</script>
<body>
  <canvas id="canvas-sample" width="200" height="150"></canvas>
  <button id="btn-sample">play</button>
</body>

preview:

MovieClip(クマ)の表示位置を2秒かけて移動させるトゥイーンのサンプル

Methods

TweenJSの主要メソッドを列挙します。
「Code Example」ボタンを押すとプレビューのコード例が表示されます。

Description

get ( target , props )

  • target: トゥイーンさせるオブジェクトを指定
  • props:
    • {loop:true}指定するとループ再生される
    • {paused:true}指定すると自動再生されない
      ※.setPaused(false)で再生開始
    • 等...

指定したオブジェクトに簡単なトゥイーンをさせる。
createjs.Tween.get(target)
  .to( {x:100}, 1000, Ease.elasticOut );

preview:

to ( props , duration , ease )

  • props: 変化内容を指定
  • duration: 変形の時間指定(ミリ秒)
  • ease: イージング指定。種類は後述

指定したオブジェクトを連続して変化させる。
createjs.Tween.get(target)
 .to({x:0,y:50},500, createjs.Ease.cubicIn)
 .to({x:100,y:0},500, createjs.Ease.quadIn)
 .to({x:0,y:0},500);

preview:

wait ( duration )

  • duration: 指定した時間(ミリ秒)、トゥイーンを停止する

トゥイーンの途中に1秒間waitを挟む。
createjs.Tween.get(target)
 .to({x:0,y:50},500, createjs.Ease.cubicIn)
 .wait(1000)
 .to({x:100,y:0},500, createjs.Ease.quadIn)
 .to({x:0,y:0},500);

preview:

set ( props , target )

  • props: 変更する属性値をObject形式で指定。例:{visible:false}
  • target: 自身以外のオブジェクトに適用させる場合、適用対象のオブジェクトを指定

指定したオブジェクトのトゥイーン後に属性値をsetして非表示状態にする。
さらに別要素の属性値もsetして横幅を広げてみる。
var testStyle = document.getElementById('test').style;
divWidth += 20;
createjs.Tween.get(target)
  .set({visible: true })
  .to({x:0,y:50},1000, createjs.Ease.quadIn)
  .set({width: divWidth + 'px' }, testStyle)
  .set({visible: false })
  .to({x:0,y:0});

preview:


pause ( tween )

  • tween: トゥイーンを一時停止させる。
    ※パラメータ無しの場合、自身を停止。別のTweenを停止させる場合は第一引数に指定する。

トゥイーンの途中にpauseを挟んで一時停止させる。
createjs.Tween.get(target)
  .to({x:0,y:50},500, createjs.Ease.cubicIn)
  .to({x:100,y:0},500, createjs.Ease.quadIn)
  .pause()
  .to({x:0,y:0},500);

preview:

play ( tween )

  • tween: 一時停止したトゥイーンを再生する。
    ※パラメータ無しの場合、自身を再生。別のTweenを再生させる場合は第一引数に指定する。

一時停止しているトゥイーンをplayで再生させる。
var tween1 = createjs.Tween.get(target1)
  .pause()
  .to({x:0,y:50},500, createjs.Ease.cubicIn)
  .to({x:100,y:0},500, createjs.Ease.quadIn)
  .to({x:0,y:0},500);

createjs.Tween.get(target2)
  .to({x:-100},500, createjs.Ease.cubicIn)
  .play( tween1 )
  .to({x:0},500, createjs.Ease.cubicOut);

preview:

call ( callback , params, scope )

  • callback: 指定した関数を実行する
  • params: 関数のパラメータ。配列で指定
  • scope: 関数内スコープを指定可能。指定無しなら自身。

トゥイーン中に指定した関数を呼び出す。
createjs.Tween.get(target)
  .to({x:0,y:50},500, createjs.Ease.cubicIn)
  .to({x:100,y:0},500, createjs.Ease.quadIn)
  .call(function(){ alert('call method !'); })
  .to({x:0,y:0},500);

preview:

Note:
他にも多くのメソッドが用意されています。下記のサイトでチェックできます。
参考URL:TweenJS Docs

▲目次

TweenJSにはデフォルトで数十種類のイージングが用意されています。

使用例:

↓のコードは、targetを1秒かけてx方向に100px移動させる際に、適用するイージングを設定する例です。

createjs.Tween.get( target ).to( {x:100}, 1000, createjs.Ease.quadIn );

サンプル集:

以下、ソース(TweenJS/Ease.js)からイージングメソッドをかき集めて、まとめて再生するサンプルです。動作確認用です。。

その1

その2

Note:
「その2」のサンプルは実用的なものが揃っていますね。
他にもEase.get〜系のイージングメソッドがあり、それらは値を渡すことで動きを調整することができるようです。
参考URL:TweenJS/Ease

▲目次

TweenJSには、複数のトゥイーンを同時に再生したり、タイミングを合わせたりする際に活用できる「Timeline.js」というライブラリが含まれています。

Constructor

Timeline ( tweens , labels , props )

  • tweens: 複数のトゥイーンを配列で指定できる
    • 例: [tween1, tween2]
  • labels: 複数のラベルをObject形式で指定できる
    • 例: {start:0, jump:1500, end:3000}
  • props:
    • {loop:true}指定するとループ再生される
    • {paused:true}指定すると自動再生されない
    • 等...

進捗ゲージとクマがジャンプするトゥイーンを同時に再生する例。
var tween1 = createjs.Tween.get( exportRoot )
  .call(function(){ exportRoot.stop(); })
  .to({ y: 0 }, 1000, createjs.Ease.backIn)
  .to({ y: 50 }, 2000, createjs.Ease.backInOut)
  .call(function(){ exportRoot.htmlay(); });
var tween2 = createjs.Tween.get( gage1 )
  .to( { scaleX: 200 }, 3000 );
var tweens = [tween1,tween2];

var labels = { stop:0, jump:1, drop:1500, walk:3000 };

var tl1 = new createjs.Timeline( tweens, labels, { paused: true } );

document.getElementById('btn-timeline-jump').addEventListener('click', function(){
  tl1.gotoAndPlay("jump");
});
preview:

Methods

主要なメソッドを列挙します。

addTween ( tween )

  • tween: タイムラインに乗せるトゥイーン

addLabel ( label , position )

  • label: ラベルの名前
  • position: 何ミリ秒の位置にラベルを設定するか

gotoAndPlay ( positionOrLabel )

  • positionOrLabel: タイムライン上で再生を開始する位置をラベル名orミリ秒で指定

gotoAndStop ( positionOrLabel )

  • positionOrLabel: タイムライン上で一時停止する位置をラベル名orミリ秒で指定

動作はConstructorのコードと同じです。
var tl1 = new createjs.Timeline( null, null, { paused: true } );

tl1.addTween( createjs.Tween.get( exportRoot )
  .to( { y: 0 }, 1000, createjs.Ease.backIn )
  .to( { y: 50 }, 2000, createjs.Ease.backInOut ) );
tl1.addTween( createjs.Tween.get( gage1 )
  .to( { scaleX: 200 }, 3000 ) );

tl1.addLabel("stop",0);
tl1.addLabel("jump",1);
tl1.addLabel("drop",1500);
tl1.addLabel("walk",3000);

document.getElementById('btn-timeline-jump').addEventListener('click', function(){
  tl1.gotoAndPlay("jump");
});

Note:
メソッドはここで紹介しているものだけではありません。時間ができたら追記予定です。詳しくは下記のURLのを参照してください。
参考URL:TweenJS/Timeline

▲目次



作成者: @7vsy

ホームへ戻る