KLWPでマテリアルデザインなフローティングアクションボタン(FAB)を作る方法

20160802-klwp-0

KLWPでは、変数やアニメを使ってフローティングアクションボタン(FAB)を作ることができます。フローティングアクションボタンというのは、Gmailなどマテリアルデザインのアプリでよく使われる、右下にある丸いボタンのことです。ボタンをタップするとメインの機能が動いたり、サブメニューが表示されたりするアレです。

完成形はすでに上のヘッダー画像で出していますが、今回はタップするとサブメニューが表示されるフローティングアクションボタンを作ってみたいと思います。

グローバル変数の設定

20160802-klwp-120160802-klwp-2

ボタンを押した状態かどうかを判断するためにグローバル変数を使います。
Root画面から「グローバル」にタブを移動して+ボタンから変数を新規作成しましょう。名前は何でもいいですが、わかりやすく「fab」としました。タイプは「On/Offスイッチ」です。

トリガーとなるボタンの作成

ボタンの見た目を作成

20160802-klwp-320160802-klwp-4

まずはトリガーとなるボタンを作成します。
Root画面から「グループ化(重ねる)」を作ります。位置はアンカー「右下」のXオフセット「27」Yオフセット「117」です。
次に、グループの中に「図形」で円を作成します。幅は104です。

20160802-klwp-520160802-klwp-6

図形の位置はアンカー「左上」、余白は全て「25」です。
さらに「FX」から影「アウター」を設定します。ぼかし24、方向270、距離3です。(このあたりの数値は自分の好みで。)

ボタンをタップで変数切り替え

20160802-klwp-720160802-klwp-8

この「グループ化」をタップした時の動作を設定します。タブ「タッチ」からタップした時の動作を「グローバル切り替え」にし、スイッチする変数は先程作成した「fab」を選択します。

回転する+

20160802-klwp-920160802-klwp-10

次に、ボタン上の「+」を書き入れます。これはFontIconで作成しています。「Material」セットの「Add」というアイコンを使っています。大きさは54、位置はアンカー右下のXオフセット75、Yオフセット165です。

20160802-klwp-1120160802-klwp-12

「アニメ」タブに移動し、グローバルスイッチ「fab」がオンになったときの動作を設定します。
アクションは「回転」、時間は「5」、量は「87.5」です。

これでボタンをタップするとグローバル変数「fab」がオンになり、それをトリガーに+が回転し×になるという動きになります。

動きを確認

ここまでできたものを確認してみましょう。

20160802-klwp-a1

回転量などは自分で納得行くものに変更してください。

サブメニューの作成

ボタンの作成

20160802-klwp-1320160802-klwp-14

次に、タップした時に出てくるサブメニューを作成します。
最初に作った「グローバル化(重ねる)」をコピーして作ると簡単です。それぞれ名前を変更しておくとわかりやすいです。今回は元のを「FAB」コピーしたものを「sub1」としました。また、位置をアンカー「右下」のXオフセット「37」Yオフセット「257」に変更しています。

20160802-klwp-1520160802-klwp-16

中の図形は形はそのままに幅を「84」と、少し小さくしています。また色もわかりやすいように白に変更。

ボタンのアニメ設定

20160802-klwp-1720160802-klwp-18

次に、このサブメニューがFABをタップした時に表示されるようにします。グループ化「sub1」の「アニメ」タブに移動し、グローバルスイッチ「fab」をスイッチにアクションを「フェードイン」、時間を「4」で設定します。

ここまでを確認してみましょう。

20160802-klwp-a2

ボタンタップでサブメニューが表示されたり非表示になってるのがわかると思います。

サブメニューにアイコンとテキストを追加

サブメニューが白いボタンでは何なのかわからないので、アイコンとテキストを追加していきます。

20160802-klwp-1920160802-klwp-2020160802-klwp-21

「sub1」の中にFontIconを追加します。「Entypo」セットのTwitterアイコンを使いました。サイズは40、位置はアンカー「右中央」で余白は右「46」、上「2」です。

20160802-klwp-2220160802-klwp-2320160802-klwp-24

同様に「テキスト」でtwitterという文字列を加えます。こちらも位置は位置はアンカー「右中央」で、余白は右「130」です。

タップした時の動作を設定

20160802-klwp-2520160802-klwp-26

グループ化「sub1」をタップした時の動作を設定します。タブ「タッチ」からアプリの起動でTwitterを起動するように設定します。
これでメニュー1つ目が完成です。

サブメニューを増やす

メニューが1つだけでは意味ないので、もっと増やします。

20160802-klwp-2720160802-klwp-28

基本的には「sub1」をコピーして作成します。適当に「sub2」「sub3」とします。
それぞれ位置を調整して、表示された時に均等に並ぶようにします。

20160802-klwp-2920160802-klwp-30

また、表示されるアイコンやテキスト、タップした時の起動アプリを変更します。

ここまでを確認してみましょう。

20160802-klwp-a3

タイミングの調整その1

ボタンをタップするとフェードイン/アウトするのはいいのですが、もう少し工夫してみます。

20160802-klwp-3120160802-klwp-32

「sub2」のアニメの「遅延」を「1」に、「sub3」のアニメの「遅延」を「2」に設定します。これでそれぞれ少しだけ遅れてアニメーションされます。

確認してみましょう。

20160802-klwp-a4

タイミングの調整その2

先程のものでも悪くなかったですが、メニューの表示時は元のボタンに近いものから出現し、消える時も下から消えていくのは何か変です。消えるときは上から消えるようにしましょう。

20160802-klwp-3320160802-klwp-34

「sub1」のアニメで「遅延」にチェックを入れて計算機マークをタップします。これで遅延の値を式で表現できます。この式に「$if(gv(fab)=1,0,2)$」と入力します。これはグローバル変数fabが1(ON)の時に0、そうでない場合は2を返します。

20160802-klwp-3520160802-klwp-36

同じように「sub3」も遅延を「$if(gv(fab)=1,2,0)$」とします。「sub1」と逆ですね。「sub2」は変更せずに「1」のままでOKです。

これでタイミングも良くなったはずです。確認してみましょう。

20160802-klwp-a5

どうでしょう?いい感じですね。これで完成です。お疲れ様でした。

一応、このフローティングアクションボタンを使ったテーマを以下に公開します。興味あったらダウンロードしてみてください。

zooper-iconFloating Action Button1
制作: orefolder
価格: 無料

ダウンロード

応用

20160802-klwp-3720160802-klwp-38

今回はよくあるフローティングアクションボタンの形式として、トリガーとなるボタンの上にサブメニューが表示されるものを作りましたが、表示位置やアニメを応用すればもっといろんな形ができます。

20160802-klwp-a6

中央から四方に飛び出るようにしてみました。こういうのも面白いですよね。
こちらもダウンロードできるようにしました。

zooper-iconFloating Action Button2
制作: orefolder
価格: 無料

ダウンロード

まとめ

作り方として、少し長くなってしまいましたが、だいたいのやり方さえ分かれば、あとは簡単に作ったり応用したりできると思います。タップしてグローバル変数の値を変えるものと、その変化をトリガーにどうアニメーションさせるか、重要なのはそこです。

フローティングアクションボタンに限らず、いろいろなものに使えると思いますので、ぜひ自分でも作ってみてください。

KLWPの使い方やテクニックについては下記ページにてまとめています。ぜひこちらも参考にしてください。

この記事が気に入ったら
いいね!しよう
 シェアする  ツイートする
PREVIOUS POST
NEXT POST
ANDROID
GIVES YOU
MORE