Create.jsでパラパラアニメを作る

# やりたいこと
以下の要件を満たすアニメーションを作りたい
gif以外
無音であること
自動再生したい
ループしたい

# 今回の実現方法：Create.jsを使う
いろいろな方法はあると思いますが今回は、一例として
JavaScriptのライブラリ、`Create.js`を使います

# create.js?

公式：http://createjs.com/

2013年ごろに発表されたライブラリ郡
Canvasを使ってFlashのようにアニメーションが作成可能
>[FlashデベロッパーのためのCreateJS：第1回　CreateJSとは何か──そのメリットからFlashとの違いまで](http://www.adobe.com/jp/devnet/edge/articles/createjs_for_asdeveloper01.html)

## 用意するもの

+ create.js
+ (jQuery)
+ sprite画像 （一定幅で用意した画像）
![sprite.jpg](https://qiita-image-store.s3.amazonaws.com/0/57611/f7529334-d6a7-f6c6-1c1e-e72e38e91ef5.jpeg)

## 出来上がり予想図
※gif画像で恐縮ですが…こんな動きになります
![1458057270rTps7D2DCogOQ9p1458057246.gif](https://qiita-image-store.s3.amazonaws.com/0/57611/322c6b90-a0ce-e16a-b4fd-51e77e73ffa8.gif)

## 実装
```html:animation.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script>
<link type="text/css" rel="stylesheet" href="./base.css">

<script type="text/javascript">
// 処理で使う変数の宣言
var canvas;
var stage;
var anime;

function init() {
// カンバスの設定
    canvas = document.getElementById("canvas");
    stage = new createjs.Stage(canvas);

// アニメーションの実処理を行う関数のコール
    initialize();

// FPS値の設定
    createjs.Ticker.setFPS(2);
// タイマー設定（参考リンク後述　）
    createjs.Ticker.timingMode = createjs.Ticker.RAF_SYNCHED;

// SP対応・タッチイベントのチェックを行う
    if (createjs.Touch.isSupported()) {
        createjs.Touch.enable(stage);
    }
    stage.update();
}

// アニメーションの設定を行う
function initialize() {
// 利用するデータの呼び出し
// loadクラス(後述）を使ってファイルやフレーム設定を別ファイルにしても良い。
// 今回はhttpsやクロスドメイン制約などを無視ししたいためベタ書きをする
    var data = {"images": ["./test.jpeg"], "frames": [[0,0,150,150],[150,0,150,150],[300,0,150,150],[450,0,150,150],[0,150,150,150],[150,150,150,150],[300,150,150,150],[450,150,150,150]]};

// アニメーションデータの設定
    var spritesheet = new createjs.SpriteSheet(data);
    anime = new createjs.Sprite(spritesheet, 0);

// ステージに設定
    stage.addChild(anime);
    anime.play();
    stage.update();
// 一定時間ごと画面を更新する
    createjs.Ticker.addEventListener("tick", update);
}

function update(event) {
    stage.update();
}

</script>
</head>
<body>
<div class="content">
    <canvas id="canvas" width="150" height="150"></canvas>
</div>
<script type="text/javascript">init();</script>
</body>
</html>
```

```css:base.css
body {
    margin: 0;
}
.content{
    position:relative;
    background-color:#EEEEEE;
}
#canvas {
    top:0;
    left:0;
    display:block;
    width: 150px;
    padding-left:0;
    padding-right:0;
    position:absolute;
    background-color:#FFFFFF;
}
```

## 補足・参考リンク
### フレーム設定について
`initialize();`関数内で `var data = ~~ `と書いているところについて補足する

+ images:スプライト画像のURLの設定（上記参照）
+ frames:フレーム移動の単位

`[表示したい画像の幅開始点,　表示したい画像の高さ開始点, 画像幅, 画像高さ]`
※今回の場合,150x150の画像を4枚2段でつなぎあわせたスプライト画像を利用した

>参考リンク
[HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う](http://gihyo.jp/design/serial/01/createjs/0012)

### Tickerkクラス・タイマー設定
+ [CreateJS の Ticker の使い方](https://ics.media/tutorial-createjs/ticker.html)
+ [CreateJS（EaselJS）でタイマを管理するTickerクラスの使い方](http://qiita.com/sangotaro/items/e4fc581a6819a867d0e0)

### 画像ロード等
+ [CreateJSのPreloadJSが1つずつしかロードしない爆遅仕様なので、並列ロードさせて速くさせる](http://qiita.com/katapad/items/c3567a8513e7cd550524)


### その他実装する上で参考にしたもの
+ [EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション ](http://cartman0.hatenablog.com/entry/2015/10/30/193540)
+ [CreateJS始める前に、いろんな記事を集めてみよう](http://qiita.com/katapad/items/8e5a4c41255866ae245f)