JS5 :HTML5向けjavascriptフレームワークのチュートリアルサイト

TweenJSを使う

アニメーションを使うには、CreateJS配下のアニメーション用ライブラリ「TweenJS」を使うのがおすすめです。EaselJSとは別のJSファイルになりますので、別途インストールする必要があります。以下よりダウンロードして下さい。

TweenJS | A Javascript library for tweening and animating HTML5 and Javascript properties.

このライブラリはEaselJSの後で読み込む必要がありますので、注意してください。ちなみに僕はこのようなライブラリはDropboxに置いて、jsFiddleから参照しています。

<script type='text/javascript' src="/easeljs-0.4.2.min.js"></script>
<script type='text/javascript' src="/tweenjs-0.2.0.min.js"></script>

それでは早速アニメーションサンプルを見てみましょう。

初めてのアニメーション

ここでは、●が、左に徐々に移動していくだけのアニメーションを実行しています。

    var stage = new Stage($("canvas")[0]);
    var g = new Graphics();

    g.beginFill(Graphics.getRGB(0,0,0)).drawCircle(0,0,10);

    var s = new Shape(g);
    s.x = $(window).width()/2;
    s.y = $(window).height()/2;

    stage.addChild(s);

    //アニメーションの定義
    Tween.get(s).to({x:100},10000);

    //アニメーションのフレッシュレート設定
    Ticker.setFPS(60);
　　Ticker.addListener(stage);

まず、Tweenでアニメーションの定義をしています。10,000ミリ秒をかけて、指定したシェイプレイヤーのx座標を100にしようとしています。
そして、Tickerを使用してフレッシュレートの指定を行っています。この二行を訳すと、「stageに定義されたCanvas領域を毎秒60回再描画する。」という意味になります。setFPSは、その数が多くなるほど、アニメーションが滑らかに。少なくなればパラパラ漫画になります。

ただ、実際に滑らかにしてもブラウザやPCの性能により、PCに負荷をかけたり、カクカクになることが多々ありますので、あまり無茶をしない方がよさげです。