トゥイーンモーションが使えるJSフレームワーク CreateJS を使ったアニメーション その1

  • はてブ

後学のためにトレンドのJSを調べていたのですが、
jQueryから入って、フロントエンドのアニメーション・マウスイベント程度しか利用しないデザイナーの私でも導入できそうなJSを見つけました。


CrateJSとは?


catch
CreatJS

こちらのJS、特徴はjQueryのようにメソッドチェーンで複数の処理を繋げることができます。
イージングもききます。アニメーションをループさせることもできます。

もうひとつ大きいのが、トゥイーンモーションが使えます。
過去にFlashでアニメーションを作っていた人にはとても分かりやすい概念のJSだと思います。
Adobeと仲の良いJSなので、Adobe Animate CCのソフト上でアニメーションを作り、JSとして書き出すことも可能です。すごい。

jQueryと違う点は、jQueryのようにDOM要素を操作するのではなく、canvasにオブジェクトを描画して、その要素に処理をかけていくので、CSSがききません。
アコーディオンなどのサイト内のギミックとして使用するには使いづらいですね。jsを直接書き直す必要があるので、メンテナンスもしづらそうです。

その代わりに、マウスでオブジェクトをドラッグしたり、画像にエフェクトをかけたり、お絵かきツールのようなものを作れたり…
メインビジュアルのアニメーションやゲームなどの作成に非常に心強い味方となってくれるでしょう。

01
デモの見た目からして楽しそうです。

CreateJS デモ(本家のデモです)


style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">


CreateJSの基本のカタチ


これがCreateJSの基本の形です。



HTML

HTMLはcanvasタグを記述するだけ。idを付与します。



Javascript部分

まずはCreateJS本体を読み込みます。CDNでも、DLしてきても、どちらでもOKです。


そして、下記の記述でJSを呼び出します。画面を読み込んだときに、addEventListernerでinit関数を蹴っています。
init関数の中に、オブジェクト生成や、アニメーションの処理などをまとめて記述していきます。



円オブジェクトを生成する


これだけでは何も変化はないので、init関数の中に記述を追加し、オブジェクトを生成してみましょう。今回は円です。正円。
以下、initの中身だけ書いていきますね。

手順としては、4つです。
1-1.出力するcanvasの指定
1-2.オブジェクトを生成
1-3.1-2で生成したオブジェクトを配置
1-4.stageの描画を更新


canvas#myCanvasに赤色で直径30pxの円を配置、まで処理を書いて、最後に「描画を更新」すれば表示できます。


別タブで表示

表示できると楽しくなってきます。

トゥイーンアニメーションで動かしてみる


今度は、前項で作った円を動かしてみましょう。
手順が2つ追加になります。
2-1.オブジェクトを配置した後に、アニメーションの記述を追加
2-2.1-4で記述した「描画を更新」をアニメーション向けに変更

アニメーションの処理は、この記述を追加します。


「描画を更新」の記述は、こう変わります。

(イメージとしては、jQueryのsetTimeoutのような意味合いになります。定期的にイベントを監視する役割があります。)


別タブで表示


アニメーションはイージングもかけられます。


チェーンメソッドで繋げられます。


ループもできます。


全部盛りすると、こうなります。

別タブで表示


また、createJSにはフレーム数の概念があります。いわゆるfpsですね。
デフォルトでは1秒間に24フレームなので、ちょっとアニメーションが荒く感じる場合は、下記の一文を追加してやりましょう。
数字は任意です。60もあればじゅうぶんなめらかになると思います。







他にもオブジェクトをグループ化できたり、イベントを付けたり、コールバックできたり…かゆい所に手が届く機能が満載です。
まだまだやってみたいので、続編も書きたいですね。





style="display:block"
data-ad-client="ca-pub-4667789978705365"
data-ad-slot="9480048027"
data-ad-format="auto">

森島

執筆者: 森島

8bit デザイナーです。 コーディング・jQueryなど幅広く担当しています。

株式会社8bit (エイトビット)

東京都渋谷区でWebサイト制作、Webシステム開発などを行っております。
キャンペーンサイトやWebサービスの企画・提案を得意としており、自社での経験を元にアイデアをカタチにするお手伝いをさせていただいております。

制作に関するご相談はお気軽にどうぞ

コンペ参加や相談ベースでもご相談承っております。

お問い合わせ