3/8（金）新潟グラムさんで登壇してきました。
新潟では毎年3月に「にいがた酒の陣」という日本酒の祭典が開催されるのですが、新潟グラムはその前日に行っている非公式のプレイベント（？）です。
今回はアニメーションについてお話ししてほしいとオファーを頂いたのでお邪魔してきました。
内容の振り返り
ぼくは「今どきのWebアニメーション実装」というテーマで、大きく3つに分けてお話をしました。
- 今はどういった実装方法があるのか
- ツールで作成したアニメーションをWebで表示させるための連携方法
- アニメーション作成のポイント
参加者の属性がデザイナー寄りではあったものの、ディレクターの方もいたりとバラバラだったので何を話そうかと悩みました。
とはいえ新潟のコンテンツ制作のクオリティを上げるという視点で考えたときに、これまでの経験を踏まえてエンジニア目線で話したほうが何かと価値があるのかなと考えて内容を決めました。
当日のスライドはこちらです。
登壇はやっぱり緊張しましたが、終わった後にたくさんの方から参考になったと感想をいただけて安心しました。
これからさらに精進します。
フォローアップ
時間をオーバーしてしまうほどの内容でしたが、補足をここで紹介しておきます。
各アニメーションの使いどころについて
若干説明しきれなかったので補足です。
技術については把握したけど、じゃあ具体的にどんな状況で使えばいいのか。
CSSアニメーション
単方向のアニメーションという特性上、シンプルな動作にマッチします。
ボタンのホバーアクションやアイコンのマイクロインタラクション、テキストやオブジェクトの表示アニメーションなどちょっとしたアニメーションをつけたいときによく使われています。
CSSアニメーションは管理が煩雑になりやすいので「無理をしない」が鉄則。
Spriteアニメーション
Twitterのいいねボタンのアクションを始め、「パーティクルとかちょっと凝ったアニメーションをしたいけどコードを書いて表現するのはツラい」ような場合に相性が良いです。
After Effectsでサクッとアニメーションを作って、画像を連番で書き出して1枚の画像にまとめる流れが一番効率が良いと思います。
画像を1枚にまとめる手段は、spritesmithで自動でまとめたりPhotoshopのjsxファイルなどが配布されていたりするのでググってみてください。（ここだけ投げやりで申し訳ない）
SVGアニメーション
レスポンシブデザインのサイトだったらまずSVGアニメーションを検討してみましょう。
デバイス別の調整はCSSでSVG全体のサイズ調整をしてあげればいいだけの場合もあるので、鮮明さを保ったままコストをかけずに済みます。
またアイコンなどのマイクロインタラクションはSVGで実装されていることが多いです。
あとはパスアニメーションが必要な場合はSVGに頼らざるを得ないでしょう。
JavaScript（DOMアニメーション）
HTML要素をアニメーションさせる場合に利用しますが、CSSではできない制御をしたい場合になります。
例えばランダムな動きをつけたい場合やアニメーションさせた後に何かの処理をさせたい場合など、アニメーションを細かく制御したい場合に最適です。
ライブラリによってはタイムラインを管理できるものもあるので、アニメーションの開始位置や終了位置の制御も容易になります。
Canvasアニメーション
Canvasアニメーションの使い所は簡単なアニメーションというよりは、さらに複雑なものに適しています。
Flashコンテンツの代替と言えばわかりやすいのではないでしょうか。
たとえば西尾維新オフィシャルサイトのオープニングアニメーションのように、複雑な線画をアニメーションさせる場合や、一度に動かすオブジェクトが沢山ある場合などにCanvasアニメーションが威力を発揮します。
パーティクルの描画などはCanvasが必ず用いられる好例ですね。
これはDOMアニメーションの場合だと、多くの要素を一度に動かすとブラウザに負荷がかかって動作が重くなってしまうためです。
また参考ですが、ブラウザゲームなどの高負荷がかかるコンテンツではCanvasが用いられています。
作り手が，少しでも自由に，より新しいものにチャレンジしやすい環境を作りたかった――Yahoo! JAPANが満を持して放つ“第3のプラットフォーム”は，HTML5を最大限活用した「ゲームプラス」
WebGL
WebGLでは3Dコンテンツはもちろん、水の波紋を表現したり、奥行きを活かした質感を表現できる技術です。
サイトで採用すればインパクト間違いなしです。
これもCanvasアニメーション同様、オープニングアニメーションやサイト全体を3D空間に見せるなど比較的大きい範囲で使う場合に適しています。
以下のサイトではWebGLを使ったサイトが紹介されているのでアイデアが欲しいときに覗いてみると参考になります。
Q. After EffectsやAnimate CCは使っていいの？ 負けじゃないの？
これはぜひ使ってください！
アニメーション制作はWeb技術だとかなり非効率ですので、ツールに頼ったほうが良いと思っています。
細かい数値の変更でブラウザリロードを繰り返すのは結構な苦痛を伴う作業です。
WebGLなど高度なことをしたい場合はツールを使えない場合もありますが、ツールを有効に使うことは確実に制作の手助けになるはずです。
懇親会
イベント後の懇親会の様子です。
1年ぶりに会ったトロさんがコロッとなっててさらに可愛さが増してた。（カメラ目線でピースしてる人）
なかなか会う機会が無い方ともお会いできてとても楽しいイベントでした！
また皆さんお会いしましょう！！