Allied ArchitectsAllied ArchitectsEngineer Blog

CSS3とJavaScriptでアニメーションメニューを作る

2013/03/25 JavaScript

開発本部の長野です。
monipla for Facebookの開発や社内インフラ運用などをやっています。

今回はボタンをクリックするとそのボタンから
放射状にサブボタンが広がるアニメーションを作ってみました。
メニュー等で使えそうですね。

早速ですがサンプルです。

真ん中のボタンを押すと、右上のテキストボックス内の数字分サブメニュー的なボタンが現れます。
さらにサブメニューのボタンを押すと同じようにサブメニュー的なボタンが現れます。

解説①

ボタンを押した直後の動作です。
まずは右上のテキストボックスの数値を取得して、
その数値分unitという自作のクラスをnewしています。
その際にsetTimeoutで0.05秒の間隔を開けることで、ずらしながら表示しています。

解説②

unitクラス作成時の処理です。
createElementでdivタグを作り、
あらかじめスタイル指定してある「subButton」クラスとonclickイベントを設定します。

押したボタンの位置を「getBoundingClientRect」関数で取得し、
「WebkitTransform」でその位置にdivタグを配置します。

その後、「WebkitTransition」で0.2秒間リニア(一定速度)移動するというアニメーション指定をします。
最後にbodyに作成したdivタグを追加します。
(この時点ではsubButtonにopacity:0で指定しているため何も表示されません)

解説③

最後にアニメーションをスタートさせます。
スタートさせると言っても②でアニメーションの動きを定義しているため、
ここでは「translate3D」で位置を、「opacity」で透過度を指定するだけで勝手にアニメーションしてくれます。

位置は自分自身が移動する角度を求めてからラジアンに変換し、
Math.sinとMath.cosをかませてそれぞれx軸、y軸に設定しています。

以上で完成です。
実際に実用的なメニューにするには
・もう1回押したときにクローズにする
・メニューの階層やボタンのデザイン等を定義する
・回転やバウンド、マウスオーバ時の挙動等楽しい動きを出す
等あります。

ゲーム系のアプリで時々みるようになりましたが、
CSS3を使ったメニューは今後ますます増えていきそうで楽しみですね。

最後にアライドアーキテクツでは、一緒に働いてくれるエンジニアを募集中です。
興味がある方は、こちらの採用サイトからご応募ください。

nagano
  • nagano
  • Webエンジニア
  • サービス開発や社内インフラ等を担当しています。 このブログではJavaScript周りのネタを中心に書いていきたいです。

RELATION ENTRY

Unityを触ってみる3

Unityを触ってみる3

2017/10/11 未分類

はじめに こんにちは。プロダクト開発部兼UGC事業部の長野です。 気づけば3年半振りの投稿です。 本業ではphpやJavaScriptを触っていますが、このブログでは引き続きunityネタで行きます。 今回はunityに今流行のDeepLearningを組み合わせたlisというものを使ってみます...

続きを読む

Unity 4.3を触ってみる2

Unity 4.3を触ってみる2

2014/05/8 JavaScript

こんにちは。システム部の長野です。 今回も前回に引き続きUnityネタで行きます。 今流行の鳥を飛ばして障害物を避けていく某人気ゲームのようなものを作ってみました。 (既に出尽くした感満載ですが、、) サンプル ※閲覧するにはUnity Web Playerのインストー...

続きを読む

naganoの記事一覧へ

ページTOPへ