関西フロントエンドUG Webとアニメーションの様々なありかたに参加してきました
アニメーションの実装まわりや考え方ってあまり知らなかったので参加してみました。
connpassのページはこちら
今回は、以下のセッションが行われました。
- ディズニーから学ぶ アニメーションの基本原則
- FlashでHTML5アニメーションを作ってみた
- Canvas でパラパラ漫画を作ってみた
- パララックスサイトの設計方法、制作フロー
- アニメーションのためのパフォーマンスの基礎知識
- 自社ロゴを手書きSVGで書いてアニメーションさせてみた話
この中で幾つかピックアップして書いてみます。
ディズニーから学ぶ アニメーションの基本原則
risa.yasuiさんによるディズニーのアニメーションの原則とその考察のセッションでした。
ディズニーアニメーション 生命を吹き込む魔法 ― The Illusion of Life – Amazon.co.jp
さすがディズニー。めっちゃ高い。
話されていた中で一部だけ紹介。
予備動作
何か動作をする前に予備動作をする事で、その後のアニメーションを心地よいものにする事ができるそう。
右から出ていたものが戻るときにちょっとだけ右に伸びてから戻っていくとか、トップに戻るボタンを押したらちょっと下に下がってから戻るみたいなのちょくちょく見かけますね。
演出
見せたい要素に対して他の要素を変形させることで強調させるというもので、例えばモーダルを使うときに、背景を暗くしてパネル部分を強調させるようなそういう表現の事のようです。
本文を読んでる時にサイドバーにぼかしがかかる様なサイトをたまに見かけますが、それもこの演出の話になるんでしょうか。
後追いの動き
アニメーションさせてる要素を一気に止めるんじゃなくて、順番に止めていくというもの。
車なんかを動かすときにタイヤを止めてボディを止めてみたいな感じに作るといいそうです。確かに慣性なんかを考えるとその方が自然なアニメーションになって良さそうです。
使えるとこはすぐにも使えそうですが、物によっては難しそうだなと思いました。
途中までだったので、最後まで聞きたいと思ったセッションでした。
FlashでHTML5アニメーションを作ってみた
YusukeKanoさんによるAdobe Animate CCを使ったアニメーションの制作デモ。
Flashって使えなくなってきているしその制作ツールってもう良いかと思っていたのですが、どうやらAdobe Animate CCを使えば簡単にHTML5 canvasやSVGでの書き出しが出来るとのこと。
- プレビューでの実行だと変更が反映できない
- スクリプトのデバッグがツール上でできない
など気になった点が有るそうで、ちょっと使いにくいようにも思いますが、面白そうだなと思いました。
パララックスサイトの設計方法、制作フロー
@shima_x_o さんによるはっぴ本ができるまでというパララックスサイト制作時にjadeで設計した話。
パララックスサイトを作るうえで、skrollrというプラグインが簡単だったから使ったそうです。
パララックスサイトを作る上で動かしたいものが増えてくるとHTMLが複雑になってしまうため、jadeを用いてファイルを分けたそうです。
最近jadeでファイル分割して嬉しい結果になる話をちょくちょく目にするのでもう1度使い方を勉強し直そうかなと思いました。
アニメーションのためのパフォーマンスの基礎知識
@_likrさんによるアニメーションを実現するためのパフォーマンスの基礎知識についての話。
スライドは以下。
アニメーションとは16ミリ秒毎に画面を更新する事とか60fpsが人間が認識できるギリギリの速さとかって話があってちょっと( ﾟдﾟ)ﾎﾟｶｰﾝって時もあったのですが、なるほどなってなる場面が幾つかありとても勉強になりました。
RAILというアニメーションでださないといけないパフォーマンスの話があるらしいです。あとでもうちょっと調べます。
そういった物をふまえて、実際に実装するときは、
- CSS Animate / CSS Transitions
- Web Animations
- requestAimationFrame
の順で検討してみるのがいいそうです。
今回は色々と勉強になりました。
とりあえずVelocity.jsとかCSS Animate辺りをもう少し勉強してみたいかな。