15 min/d

ぼうずやのにっき

関西フロントエンド UG の『 Webとアニメーションの様々なありかた』にいった

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

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

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

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

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

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

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

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

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

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