CreateJSを使って雪が降るアニメーションを作ろう！

CreateJS 2017.11.02 ichikawa

こんにちは！フロントエンドエンジニアの市川です。
早いものでもう11月に突入しましたね！今年も残すところあと2ヶ月。
ハロウィンが終わり、クリスマスの季節がやってきます☆ミ
そんなこれからの時期にぴったりの、雪が降るアニメーションをHTML5 canvasのフレームワークである「CreateJS」を使用して作成してみました。

目次

完成したアニメーション

まずは完成したアニメーションをご覧下さい！



大・小の雪が上から下に降り続けています。よくよく見てみると、少し左右にゆらゆらしていたり、大きい雪の方が若干落下スピードが早かったりするのがわかると思います。

CreateJSとは？

ソース解説の前に、CreateJSについてご紹介したいと思います。
CreateJSとは、HTML5 canvasのフレームワークです。
そもそもHTML5 canvasとは、JavaScriptを用いてリッチなアニメーションを実装する際に使う技術ですが、 CreateJSを用いずにcanvasを利用する場合、書き方が直感的でなかったり、ちょっとしたアニメーションでもソースが長くなってしまうデメリットがあります。CreateJSを用いると、直感的に、簡潔に書くことができ、多様なアニメーションに対応しています。JavaScriptのjQueryのようなイメージでしょうか。
さらに、MITライセンスで商用利用もOKです。

4つのライブラリに分類

CreateJSは、実は以下の4つのライブラリが合わさったパッケージで、ライブラリごとに役割が異なります。 必要なライブラリのみダウンロードして使うことも可能です。

  1. EaselJS：HTML5 canvasを扱うのを容易にするための基本のライブラリ
  2. TweenJS：要素にアニメーションを加えるためのライブラリ
  3. SoundJS：要素にサウンドを加えるためのライブラリ
  4. PreloadJS：外部ファイルの読み込みや管理を行うためのライブラリ

入手方法

こちらの公式サイトからダウンロード可能です。今回は全てのライブラリが入った「CreateJS」を使用しております。

ソース

ソースの全貌はこちらです！

大まかな流れ

まずSnowオブジェクト内で雪の数分ループを回し、1つ1つの雪ごとの初期位置、大きさなどの値を生成します。値はBallオブジェクトに渡り、1つ1つの雪の形をCreateJSで生成します。Snowのloopプロパティの中で描画を更新し続けることで雪が降るアニメーションを実現しています。

ポイント

ソースの中のポイントをピックアップしてご説明していきます。

  • self.stage = new createjs.Stage("snow");はCreateJSを使用するためのおまじない的な役割です。"snow"の部分はHTMLのcanvasタグのidと合わせます。

  • var len = 250;は雪の総数です。値を変えると雪の数が変化します。

  • Math.random() > 0.5 ? 5 : 2では大(半径5px)・小(半径2px)の2種類のサイズの雪をランダムに生成しています。

  • Ball.getRamdomRgb()では雪の色をランダムにすることが可能です。今回は白のみに統一しており、Ball内でbackground : 'rgba(0,0,0,1)'で白のみに統一しています。

  • var move = Math.cos(ball.angle) * 0.03;では雪が左右にゆらゆらする動きを処理しています。0.03を変えると左右の揺れ幅が変わります。

  • ball.y = ball.y + ball.vy * Util.map(ball.size,2,5,1,1.6);では大小の雪のサイズごとに落下速度を変える処理をしています。2つめと3つめ引数で大小の雪のサイズを指定し、4つめと5つめの引数で落下速度を指定しています。大きい雪の方が落下速度をはやくするため1.6に設定しました。

  • self.stage.addChild(self.shape);ではCreateJSで作成した雪をcanvas上のステージに追加するのですが、あくまで ”追加” するだけで、これだけだと表示されません。self.stage.update();を実行することではじめてステージ上に描画されます。

  • loop内、window.requestAnimationFrame($.proxy(self.loop,self));が今回の重要なポイントです。window.requestAnimationFrame()とは何かというと、下記の通りです。

    ブラウザにアニメーションを行いたいことを知らせ、指定した関数を呼び出して次の再描画の前にアニメーションを更新することを要求します。このメソッドは、再描画の前に呼び出されるコールバック 1 個を引数として取ります。

MDNより引用


つまり、今回の場合は引数の中でとったself.loopを実行し描画し続けています。ball.xとball.yの雪の位置データが変化し、描画を繰り返すことで雪が降っているアニメーションが再現されています。

おわりに

いかがでしたでしょうか？canvasは難しいイメージがありましたが、CreateJSを使うことで敷居が下がり、他にも様々なアニメーションが実現できそうです。
また、今回の雪もそうですが、雨や風など自然現象（規則性のないもの）を違和感なく再現するのはとても難しいことなんだなと実感しました…。 実装に入る前に、youtubeなどで雪が降っている様子をみて、どんな動きをしているのかじっくり観察してみるとより自然に近いアニメーションが実現できるかもしれないですね！

今回は以上になります。最後までお読み頂きありがとうございました！

この記事を書いた人 ichikawa 2014年新卒入社のフロントエンドエンジニア。CSSが得意です。
TOP