CREATEjsで478呼吸法のアニメーション作ってみた

先日始めた治験の準備で休薬したところアトピーが激悪化。
その影響？で夜全く眠れなくなってしまった今日この頃です。
おかげで日中動けなくて仕事お休み中。。。

会社は年末で退職するんですけど

現場もいったん年末で退場するんですけど

残りの期間ずっと休んだままなのもまずいので、眠れるように478呼吸法のアニメーションを作ってみました。
えぇ、はい、CREATEjs使ってみたかっただけでございます。

作成物がこれ。

1 CREATEjsとは
2 作ってみる
3 簡単なコードでいろいろできる

CREATEjsとは

CreateJSは、HTML5でリッチコンテンツを制作するためのJavaScriptライブラリのスイート（特定用途のソフトウェアを詰め合わせたパッケージ）です。Flashデベロッパーとして著名なGrant Skinner氏（gskinner.com）が開発を行っており、MITライセンスのオープンソースソフトウェアとして商用でも無償で利用できます。

Adobeより

あれですね。
Flash＋ActionScriptが化石と化したので、次世代としてcanvas＋CREATEjs作ったって感じですかね。

作ってみる

あまりコード量がなかったので、CSSもJSもHTMLの中に直書きです。
手抜き手抜き。

使い方

jQueryなどと同じく、CDNで読み込んで使えます。
もちろんファイルをダウンロードして置いてもOK。

最新のCDNとファイルはこちらに記載されています。

code.createjs.com

CreateJS Content Delivery Network

https://code.createjs.com

Using the CDN (Content Delivery Network) hosted versions of the CreateJS libraries in your project allows them to be downloaded quickly and cached across different sites using the same version of the libraries, which can reduce bandwidth costs and page load times.

ツールがテキストエディタとブラウザだけで済むのが楽でいいですね。

参考にしたサイト

ICS MEDIAさんのサイトがサンプルもありわかりやすかったので参考にしました。

イメージしてたのにかなり近いサンプルがあったので、それをちょこっと改造。
ベース部分は「サンプルで表示リストを理解しよう2 (回転挙動)」に解説があるのでそちらを見てください。

改造部分

canvasのサイズを画面に合わせる

サンプルではcanvasのサイズを直書きしてました。

<body>
<canvas id="myCanvas" width="960" height="540"></canvas>
</body>

<body>

</body>

でも、478呼吸法をやるとしたら布団の中。
つまりPCじゃなくスマホで見る。
ので、スマホの画面サイズにも合わせられるようにcanvasのサイズをJSで指定するようにします。

まず、canvas をdivで囲って

<body>
<div class="contents">
<canvas id="myCanvas"></canvas>
</div>
</body>

<body>

</div>

</body>

CSSでdivのサイズを画面に合わせて

.contents{
width: 100%;
height: 100%;
background-color:teal;
}

.contents{

width: 100%;

height: 100%;

background-color:teal;

}

JSでcanvasのサイズを設定します。

var w = $('.contents').width();
var h = $('.contents').height();
$('#myCanvas').attr('width', w);
$('#myCanvas').attr('height', h);

var w = $('.contents').width();

var h = $('.contents').height();

$('#myCanvas').attr('width', w);

$('#myCanvas').attr('height', h);

円のサイズを画面内に収まるよう調整する

サンプルだと円のサイズも直書きしているので、画面サイズに合わせます。

スマホの縦/横向きに対応するため、幅が狭いほうを基準とします。

var s = Math.min(w, h);
ball.graphics
.beginFill("DarkSeaGreen")
.drawCircle(0, 0, s/25);
ball.x = s/6 * Math.sin(i * 360 / 10 * Math.PI / 180);
ball.y = s/6 * Math.cos(i * 360 / 10 * Math.PI / 180);

var s = Math.min(w, h);

ball.graphics

.beginFill("DarkSeaGreen")

.drawCircle(0, 0, s/25);

ball.x = s/6 * Math.sin(i * 360 / 10 * Math.PI / 180);

ball.y = s/6 * Math.cos(i * 360 / 10 * Math.PI / 180);

呼吸に合わせて円のサイズを変える

Tweenを使って、円のサイズ変化を指定します。

4秒かけて2倍の大きさまで
↓
7秒間サイズキープ
↓
8秒かけて元のサイズに戻る

これを繰り返すために、Tween.getの第2引数に{loop: true}を追加しておきます。

createjs.Tween.get(container, {loop: true})
.to({scaleX: 2, scaleY: 2}, 4000)
.to({scaleX: 2, scaleY: 2}, 7000)
.to({scaleX: 1, scaleY: 1}, 8000);
}

createjs.Tween.get(container, {loop: true})

.to({scaleX: 2, scaleY: 2}, 4000)

.to({scaleX: 2, scaleY: 2}, 7000)

.to({scaleX: 1, scaleY: 1}, 8000);

}

完成形

こんな感じ。
ソースはGitHubに上げました。

GitHub

hazhikko/create_js

https://github.com/hazhikko/create_js/blob/master/478.html

Create.jsのサンプルファイル. Contribute to hazhikko/create_js development by creating an account on GitHub.

眠くなる色が緑と黄色っていうけど本当だろうか…。

簡単なコードでいろいろできる

canvasって何のためにあるんだろうな…って思ってたんですけど、CREATEjsを使ったら結構複雑な動きができそうです。
これだけで簡単なゲームも作れそう。

CREATEjsと別のCDNでSOUNDjsというのがあって、これを使うと音を鳴らせるんですけど、音源用意しなきゃいけなかったのでまた今度。
眠くなる音…なんだろな…。