以前の案件でcanvas周りの経験がなかったので人に部分的にコーディングをお願いすることがあってちょっと悔しい思いをしました。以後、canvasを使ったアニメーションがあった場合、自分の力でやりたいのでcanvasアニメーションの勉強をしました。
canvasを使ったアニメーションのやり方
ざっくりいうとそのままJavaScriptでゴリゴリ書いてしまうか、「CreateJS」「PixiJS」のcanvasアニメーションのフレームワークどちらかを使って書くかなのですが、フレームワークに沿って書いたほうが楽なので、「CreateJS」「PixiJS」のどちらを使おうか検討しました。
上記の記事によると両者ともにメリット・デメリットがあるようなのですが、今回はパーティクル描画が得意な「PixiJS」よりもグラフィック描画が得意な「CreateJS」を選択しました。
（関係ないんですけど、「CreateJS」の最終verが2015みたいなのですが開発止まってるんですかね？）
CreateJSの学び方
調べるとマイナビさんから専門書が発売されてるようなのでジュンク堂で軽く立ち読みしてたのですが、買うまででもないなという感じだったのでICS MEDIAさんが作っていらっしゃった「CreateJS 入門サイト」を一通りやってみることにしました。CreateJS 入門サイトボリュームもそこまでなく1日あれば一通りできる量です。
図形描画なので三角関数やラジアンなどの数学出てくるので、その辺忘れていたのでちょっと勉強し直さないとなあという感想でした。それ以外はわかりやすくすんなりと学ぶことができました。
CreateJSで作ったもの
ざっくり作りたいものは最初から頭にあったので早速作ってみました。作ったものは以下の2つです。
アブストラクト調の背景
このサイトで表示されている背景です。円と線の大きさをランダムに出力、透過度、表示位置もランダムに出力、右上にゆっくりと流れていくアニメーションです。
水の波、ウェーブ
こちらのサイトのサンプルをカスタマイズしたものです。サンプルは1つの波だったのですが、波の数を増やして3つにしてみました。
以上が作成したものです。今までcanvasでアニメーションを作ろうと思ってなかったのでどんなアニメーションを作れるのかがそもそも頭にないのでこれから色んなかっこいいサイトを見てその辺のスキルを高めていけたら表現の幅も広がるなと思いました。