開発本部の長野です。
monipla for Facebookの開発や社内インフラ運用などをやっています。
今回はボタンをクリックするとそのボタンから
放射状にサブボタンが広がるアニメーションを作ってみました。
メニュー等で使えそうですね。
早速ですがサンプルです。
真ん中のボタンを押すと、右上のテキストボックス内の数字分サブメニュー的なボタンが現れます。
さらにサブメニューのボタンを押すと同じようにサブメニュー的なボタンが現れます。
解説①
ボタンを押した直後の動作です。
まずは右上のテキストボックスの数値を取得して、
その数値分unitという自作のクラスをnewしています。
その際にsetTimeoutで0.05秒の間隔を開けることで、ずらしながら表示しています。
|
1 2 3 4 5 6 |
viewCount = document.getElementById('count').value; for(i=0;i<viewCount;i++){ setTimeout(function(i) { new unit(i,parent); }, i*50,i); } |
解説②
unitクラス作成時の処理です。
createElementでdivタグを作り、
あらかじめスタイル指定してある「subButton」クラスとonclickイベントを設定します。
押したボタンの位置を「getBoundingClientRect」関数で取得し、
「WebkitTransform」でその位置にdivタグを配置します。
その後、「WebkitTransition」で0.2秒間リニア(一定速度)移動するというアニメーション指定をします。
最後にbodyに作成したdivタグを追加します。
(この時点ではsubButtonにopacity:0で指定しているため何も表示されません)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
this.id = id; this.target = document.createElement('div'); this.target.className = "subButton"; this.target.setAttribute('onClick', 'javascript:view(this);'); var bounds = parent.getBoundingClientRect(); var x = bounds.left; var y = bounds.top; this.target.style.WebkitTransform = 'translate3D(' + x + 'px, ' + y + 'px, 0px)'; this.target.style.WebkitTransition = '.2s linear'; document.body.appendChild(this.target); |
解説③
最後にアニメーションをスタートさせます。
スタートさせると言っても②でアニメーションの動きを定義しているため、
ここでは「translate3D」で位置を、「opacity」で透過度を指定するだけで勝手にアニメーションしてくれます。
位置は自分自身が移動する角度を求めてからラジアンに変換し、
Math.sinとMath.cosをかませてそれぞれx軸、y軸に設定しています。
|
1 2 3 4 |
angle = 360 / viewCount; rad = (Math.PI / 180) * (angle*obj.id); obj.target.style.WebkitTransform = 'translate3D(' + (x + Math.sin(rad)*100) + 'px, ' + (y + Math.cos(rad)*100) + 'px, 0px)'; obj.target.style.opacity = 1; |
以上で完成です。
実際に実用的なメニューにするには
・もう１回押したときにクローズにする
・メニューの階層やボタンのデザイン等を定義する
・回転やバウンド、マウスオーバ時の挙動等楽しい動きを出す
等あります。
ゲーム系のアプリで時々みるようになりましたが、
CSS3を使ったメニューは今後ますます増えていきそうで楽しみですね。
最後にアライドアーキテクツでは、一緒に働いてくれるエンジニアを募集中です。
興味がある方は、こちらの採用サイトからご応募ください。
サービス開発や社内インフラ等を担当しています。 このブログではJavaScript周りのネタを中心に書いていきたいです。
