トゥイーンモーションが使える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 デモ(本家のデモです)


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もあればじゅうぶんなめらかになると思います。







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


執筆者:森島[ WEBデザイナー ]

8bit デザイナーです。 デザイン・マークアップ・映像制作など幅広く担当しています。

関連記事

プログラミング

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ②

前回はLINE Developersでチャネル登録までを行いました。 今回は実際にPHPでログインを実装していきます。 目次1 初期設定を定数にする2 LINE ログインのURLを作成する3 コールバック時の処理4 最後に 初期設定を定数にする 最初にdefineでチャネル登録した情報やAPIのURLを定義します。 メールアドレスを取得したい場合はLINE_SCOPEに「email」を追記してください。 LINE ログインのURLを作成する LINEログインに利用するログイン […]

Webサービス

【PHP】ソーシャルログインに対応したお話(LINEログイン編) ①

今回はLINEログインです。 LINEログインは他のソーシャルログインと違って、電話番号必須なので、ユーザーがアカウントを無限に発行するということがなく、しかもOSに関係なくアカウントを使用できるので、特にB2Cサービスを考える場合には是非導入を進めたいと思います。 逆に法人サービスで使う場合、法人担当者が個人のLINEアカウントを使用することはないと思うので、あくまで個人向けサービスがよいかなと思います。 LINEログインについての概要はこちらに詳しく書いています。 htt […]

プログラミング

【PHP】ソーシャルログインに対応したお話(Apple ID編) ②

目次1 前回のおさらい2 実装に必要な情報3 PHPで実装してみる4 戻り先の処理4.1 composerでライブラリのインストール4.2 処理の説明4.3 実際のソース5 最後に 前回のおさらい 前回は「Appleでサインイン」を実装する前の下準備をまとめました。 今回は実際にPHPで実装をしたいと思います。 なお、ソーシャルログインについて実はFirebase上でできるぽいのですが、今回はそれを使わずに実装したいと思います。 実装に必要な情報 前回Apple Develo […]

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

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

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

弊社に制作をご依頼いただく際の費用感をご確認いただける、
見積りシミュレーションをご用意いたしました。