はじめに

動きのあるリッチな画面に憧れを抱き、cnavasでアニメーションを実現できる、CreateJsなるものを見つけ、どんなものだろうかと使ってみた。

CreateJsとは

本家→https://createjs.com/
使い方は、こちらの入門サイトがサンプルも豊富。

Create.jsを使うと、HTML5のCanvas技術を用いてリッチな描画表現ができます。
Create.jsの中には以下のような4つのライブラリが含まれています。

・EaselJS : HTML5 Canvasでの制作を扱うためのJSライブラリ。キャンバス(画布)に対するイーゼル(画架)を意図した名前になっています。
・TweenJS : JavaScriptのトゥイーンエンジンです。モーション制作に役立てることができます。
・SoundJS : サウンドを利用するためのJSライブラリ。簡単にクロスブラウザでの音声再生が実現できます。
・PreloadJS : 素材（画像、音声、JS、データ）を先読みできるJSライブラリ。

作ろうとしたもの

・画面遷移をもっときれいに見せたい！
　⇒本をめくるような感じとか

動かしてみた

// EaselJS系の読み込み
import { Shape, Stage } from '@createjs/easeljs/dist/easeljs.module';
// TweenJS系の読み込み
import { Tween } from '@createjs/tweenjs/dist/tweenjs.module';

const stage = new Stage('myCanvas');

const circle = new Shape();
circle.graphics.beginFill('DarkRed').drawCircle(0, 0, 50);
stage.addChild(circle);

circle.x = 300;
circle.y = 200;

Tween.get(circle, { loop: true })
    .wait(300)
    .to({ x: 740, y: 400, scale: 2 }, 700)
    .to({ x: 400, y: 0, scale: 1.4 }, 1200)
    .to({ x: 500, y: 300, scale: 3 }, 1200)
    .to({ x: 300, y: 200, scale: 1 }, 700);

update();

// 毎フレームステージを自動更新する
function update() {
    stage.update();
    requestAnimationFrame(() => update());
}

このくらいのお手軽に、アニメーションを表現できた

結論

create.jsで実現しようとすると、自分で物理演算を考えなければいけなったので、難易度が高いことが分かった
探してみたらすでに良さそうなライブラリがあった　→　turn.js

turnjs

簡単に本をめくるようなUIが実現できるライブラリ

例えばこんな実装↓

<!doctype html>

<head>
</head>

<body>
<!-- ↓↓↓flipbookがturn.jsを使って、本として表示する部分↓↓↓ -->
    <div id="flipbook">
        <div style="background-color: #FDD17E"></div>
        <div style="background-image:url(pages/animal2.jpg);"></div>
        <div>
            <canvas id="myCanvas" width="960" height="540"></canvas>
        </div>
        <div style="background-image:url(pages/animal3.jpg);"></div>
        <div style="background-image:url(pages/animal4.jpg);"></div>
        <div style="background-image:url(pages/animal5.jpg);"></div>
    </div>
<!-- ↑↑↑flipbookがturn.jsを使って、本として表示する部分↑↑↑ -->

    <script type="text/javascript" src="lib/jquery.min.1.7.js"></script>!

    <script type="text/javascript" src="lib/turn.min.js"></script>
    <link rel="stylesheet" href="style.css">
    <script src="bundle.js" defer></script>

<!-- ↓↓↓実際にDOMに適用している部分↓↓↓ -->
    <script>
        $(function () {
            $('#flipbook').turn({
                width: 996,
                height: 646,
                autoCenter: true
            });
        });
    </script>
<!-- ↑↑↑実際にDOMに適用している部分↑↑↑ -->

</body>

</html>

Create.jsで先ほど作成したボールのアニメーションも、本の中で動かすことができた！（動く絵本とか作れそう・・・）

まとめ

実現したいことがある程度決まっているのならば、探してみると意外とライブラリはすでに作られていることもあるため、
探してみると、実は楽に実現できることもあると感じた

参照

Create.js(本家)
CreateJS入門サイト
 turn.js(本家)