Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
31
Help us understand the problem. What is going on with this article?
@OMOIKANESAN

CreateJsでリッチな画面遷移を作ろうとしてみた話

More than 1 year has passed since last update.

はじめに

動きのあるリッチな画面に憧れを抱き、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>

book.gif

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

まとめ

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

参照

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

31
Help us understand the problem. What is going on with this article?
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away

Comments

No comments
Sign up for free and join this conversation.
Sign Up
If you already have a Qiita account Login
31
Help us understand the problem. What is going on with this article?