関西フロントエンド UG の Webとアニメーションの様々なありかた に参加した。

「関西フロントエンド UG 」は HTML / CSS / JavaScript などの front-end 関連の勉強会を開催している user group 。ぼくの 2016 年の参加は 1 回目。2015 年は何度か参加している。

今回の参加に大した目的はない。「そろそろ勉強会に参加しておくか」くらいの気持ちで参加した。内容に特別な興味はない。あえてぼくが無理やり発表するなら業務で使っている小さな CSS3 Animations / Transitions あたりだろうか。

発表の一覧は connpass を見てもらうとして、気になったものをいくつか取り上げる。

『ディズニーから学ぶ アニメーションの基本原則』。『ディズニーアニメーション 生命を吹き込む魔法 ― The Illusion of Life 』 の技法を紹介したもの。発表の中で実例を挙げていた点が良かった。本を読んでみたくなった。以前この本の animation を gif でまとめた web page がぼくの feed に流れてきた記憶がある。たぶん界隈では有名な本なのだろう。

『 FlashでHTML5アニメーションを作ってみた 』。Adobe Animate CC の現状や canvas での出力結果についてなど。createjs を使っている、とか。

『パララックスサイトの設計方法、制作フロー』。Jade / Stylus 好きな人。Jade / Stylus / CoffeeScript は front-end における off-side rule 3 種の神器的なものだと思っている。まあ、どれも主流のものから外れている感じはあるけど……。ちなみに HTML を書くだけなら、ぼくのつくった b-html もいいよ (宣伝) 。

『アニメーションのためのパフォーマンスの基礎知識』。安定の @_likr 。animation は高速に切り替えた画面を描画しているだけ。その単位を frame という。1 秒間に 60 frame 確保できれば良い。いわゆる 60 fps 。requestAnimationFrame を使えばいい感じにしてくれるよ。CSS 3 Transition / Animations も手軽でいいよ。……といった感じ。網羅的で良い。今回は意外なことに、ここ以外で CSS 3 Transitions / Animations の話題があまり出なかった印象。

『自社ロゴを手書きSVGで書いてアニメーションさせてみた話』。手書き SVG といえば bouzuya の icon (bouzuya/bouzuya-icon-generator)・名刺 (bouzuya/bouzuya-card)。そして SVG も XML なので b-html を使える (宣伝 && 2 回目) 。

そんな感じ。ちなみにぼくはもくもくと関係ないことをしていた。