JavaScript

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

投稿日:




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

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

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

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

作成物がこれ。

478呼吸法に合わせて動くアニメーション

CREATEjsとは

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

Adobeより

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

作ってみる

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

使い方

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

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

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

参考にしたサイト

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

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

改造部分

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

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

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

まず、canvas をdivで囲って

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

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

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

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

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

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

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

4秒かけて2倍の大きさまで

7秒間サイズキープ

8秒かけて元のサイズに戻る

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

完成形

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

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

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

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

 

-JavaScript
-

Copyright© そんなこと猫でもできる , 2018 All Rights Reserved Powered by AFFINGER5.