後学のためにトレンドのJSを調べていたのですが、
jQueryから入って、フロントエンドのアニメーション・マウスイベント程度しか利用しないデザイナーの私でも導入できそうなJSを見つけました。
CrateJSとは？
CreatJS
こちらのJS、特徴はjQueryのようにメソッドチェーンで複数の処理を繋げることができます。
イージングもききます。アニメーションをループさせることもできます。
もうひとつ大きいのが、トゥイーンモーションが使えます。
過去にFlashでアニメーションを作っていた人にはとても分かりやすい概念のJSだと思います。
Adobeと仲の良いJSなので、Adobe Animate CCのソフト上でアニメーションを作り、JSとして書き出すことも可能です。すごい。
jQueryと違う点は、jQueryのようにDOM要素を操作するのではなく、canvasにオブジェクトを描画して、その要素に処理をかけていくので、CSSがききません。
アコーディオンなどのサイト内のギミックとして使用するには使いづらいですね。jsを直接書き直す必要があるので、メンテナンスもしづらそうです。
その代わりに、マウスでオブジェクトをドラッグしたり、画像にエフェクトをかけたり、お絵かきツールのようなものを作れたり…
メインビジュアルのアニメーションやゲームなどの作成に非常に心強い味方となってくれるでしょう。
デモの見た目からして楽しそうです。
CreateJS デモ（本家のデモです）
CreateJSの基本のカタチ
これがCreateJSの基本の形です。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!doctype html> <html> <head> <meta charset="utf-8"> <title>sample1</title> <link rel="stylesheet" href="reset.css"> </head> <body> <!--************ HTML：このcanvasに描画されます ***************--> <canvas id="myCanvas" width="300" height="200"></canvas> <!--************ js ***************--> <script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> <script> window.addEventListener("load", init); function init() { // ～ここに処理～ } </script> </body> </html> |
HTML
HTMLはcanvasタグを記述するだけ。idを付与します。|
1 |
<canvas id="myCanvas" width="300" height="200"></canvas> |
Javascript部分
まずはCreateJS本体を読み込みます。CDNでも、DLしてきても、どちらでもOKです。|
1 |
<script src="https://code.createjs.com/createjs-2015.11.26.min.js"></script> |
そして、下記の記述でJSを呼び出します。画面を読み込んだときに、addEventListernerでinit関数を蹴っています。
init関数の中に、オブジェクト生成や、アニメーションの処理などをまとめて記述していきます。
|
1 2 3 4 5 6 7 8 |
<script> window.addEventListener("load", init); function init() { // ～ここに処理～ } </script> |
円オブジェクトを生成する
これだけでは何も変化はないので、init関数の中に記述を追加し、オブジェクトを生成してみましょう。今回は円です。正円。
以下、initの中身だけ書いていきますね。
手順としては、4つです。
1-1.出力するcanvasの指定
1-2.オブジェクトを生成
1-3.1-2で生成したオブジェクトを配置
1-4.stageの描画を更新
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
function init() { //出力先canvasの定義 var stage = new createjs.Stage("myCanvas"); //オブジェクトの生成 var obj = new createjs.Shape(); //オブジェクト「obj」を生成 obj.graphics.beginFill("red"); //objの色を指定 obj.graphics.drawCircle(0, 0, 30); //objのサイズとカタチを指定 obj.x = 40; //objのx座標 obj.y = 100; //objのy座標 //オブジェクト[ obj ]を配置 stage.addChild(obj); //stageの描画を更新 stage.update(); } |
canvas#myCanvasに赤色で直径30pxの円を配置、まで処理を書いて、最後に「描画を更新」すれば表示できます。
別タブで表示
表示できると楽しくなってきます。
トゥイーンアニメーションで動かしてみる
今度は、前項で作った円を動かしてみましょう。
手順が2つ追加になります。
2-1.オブジェクトを配置した後に、アニメーションの記述を追加
2-2.1-4で記述した「描画を更新」をアニメーション向けに変更
アニメーションの処理は、この記述を追加します。
|
1 |
createjs.Tween.get(対象).to({ アニメーション },時間); |
「描画を更新」の記述は、こう変わります。
|
1 2 3 4 |
createjs.Ticker.addEventListener("tick", handleTick); function handleTick() { stage.update(); } |
（イメージとしては、jQueryのsetTimeoutのような意味合いになります。定期的にイベントを監視する役割があります。）
別タブで表示
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
function init() { //canvasの定義 var stage = new createjs.Stage("myCanvas"); //オブジェクトの生成 var obj = new createjs.Shape(); //オブジェクト「obj」を生成 obj.graphics.beginFill("red"); //objの色指定 obj.graphics.drawCircle(0, 0, 30); //objのサイズとカタチを指定 obj.x = 40; //objのx座標 obj.y = 100; //objのy座標 //オブジェクト[ circle ]を配置 stage.addChild(obj); //*********** ここからアニメーション ************* createjs.Tween.get(obj).to({ x : 300 },10000); //stageの描画を更新 createjs.Ticker.addEventListener("tick", handleTick); function handleTick() { stage.update(); } } |
アニメーションはイージングもかけられます。
|
1 |
createjs.Tween.get(obj).to({ x : 300 },1500,createjs.Ease.cubicOut) |
チェーンメソッドで繋げられます。
|
1 |
createjs.Tween.get(obj).to({ x : 300 },1500).to({ x : 40 },1500,createjs.Ease.cubicOut).to({ x : 40 },1500,createjs.Ease.cubicOut); |
ループもできます。
|
1 |
createjs.Tween.get(obj , {loop:true}).to({ x : 300 },1500).to({ x : 40 },1500,createjs.Ease.cubicOut).to({ x : 40 },1500,createjs.Ease.cubicOut); |
全部盛りすると、こうなります。
別タブで表示
また、createJSにはフレーム数の概念があります。いわゆるfpsですね。
デフォルトでは1秒間に24フレームなので、ちょっとアニメーションが荒く感じる場合は、下記の一文を追加してやりましょう。
数字は任意です。60もあればじゅうぶんなめらかになると思います。
|
1 |
createjs.Ticker.setFPS(60); |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
function init() { //canvasの定義 var stage = new createjs.Stage("myCanvas"); //オブジェクトの生成 var obj = new createjs.Shape(); //オブジェクト「obj」を生成 obj.graphics.beginFill("red"); //objの色指定 obj.graphics.drawCircle(0, 0, 30); //objのサイズとカタチを指定 obj.x = 40; //objのx座標 obj.y = 100; //objのy座標 //オブジェクト[ circle ]を配置 stage.addChild(obj); //*********** ここからアニメーション ************* createjs.Tween.get(obj , {loop:true}) .to({ x : 300 },1500,createjs.Ease.cubicOut) .to({ x : 40 },1500,createjs.Ease.cubicOut); //stageの描画を更新 createjs.Ticker.setFPS(60); createjs.Ticker.addEventListener("tick", handleTick); function handleTick() { stage.update(); } } |
他にもオブジェクトをグループ化できたり、イベントを付けたり、コールバックできたり…かゆい所に手が届く機能が満載です。
まだまだやってみたいので、続編も書きたいですね。
