2015年11月からSTARRYWORKSにエンジニアとしてジョインしました。むらのです。どうぞよろしくお願いします。

今回BUTTON INC.のトップの実装を担当させてもらいソースを公開することになったので少し解説をつけるためブログを書くことになりました。

BUTTON INC.のトップはpaper.jsというライブラリを使用して作成しています。
これはベクターデータを描画、操作するライブラリでSVGをパースしてをpaper.jsに渡すとその情報を基にcanvasに描写します。
ボタンのアニメーションは全てベクターデータを基にモーフィングさせたりしています。

似たようなライブラリでtwo.jsというライブラリがあるのですが、パスを操作するメソッドや計算処理などがpaper.jsの方が充実していることもあり今回はpaper.jsを選びました。

ボタンが押されたり逆に膨れ上がったりというアニメーションはMorphablePathというクラスを作ってモーフィングさせています。モーフィングさせるための最初と最後（細かいモーフィングであればその間のコマ）の動きをイラストレーターに作成していただくというフローでした。

イラストレーターの方に描いてもらうにあたり動きのイメージを持ちつつイラストを描いて欲しかったのでイラレからコピーしたSVG情報を貼り付けてすぐに確認できるようなツールを作成して進めました。

つぶれるアニメーションの押し続けたときプルプルするようなアニメーションは各アンカーポイントをサイン波を元に動かすFluidablePathというクラスを作って実現しています。

他にもボタンの土台の角のRが通常のパスでは再現できないため、各アンカーポイントごとの角のRを個別に指定してアウトラインを作るCustomStrokeというクラスを作ってデザイナーの細かいフォルムのこだわりに対応しています。

このサイトを通してベジェ曲線とかなり仲良くなれました。。。

アニメーションに関して実装したものを何度も見ながらMTGしてその都度、新しいアイデアや、前提が覆るようなアイデアが出てきて、「まじか。。。」とか「おぉ。。。」って気持ちも少なからずあったんですが（笑）
でも実装し直すたびにクオリティが上がっていくのを感じれてとてもモチベーション高めでがんばれました！

また、今回実装に関しては基本設計とテクニカルディレクションは弊社の木村が行いそれを僕が実装するというフローでした。
至らない点を多々フォローしていただいて、「まだまだだなー」とへこみつつ「すげー勉強になる」とテンション上がったりよくわからん情緒でやりきりました。

そんなこんなで作成したサイトのソースコードを自社案件なので公開します。何かの参考になれば幸いです！

https://github.com/STARRYWORKS/BUTTON-INC.

最後になりましたがPCとSPそれぞれでイースターエッグを仕込んでいるので是非探して遊んでみてください。

むらの