（gifのせいで重いです）
ホーム画面はアプリとウェジェットの二つで構成することが多いと思います。
そこでよく使うアプリを格納しておくフォルダ的なものの原型、アイデアを個人的なメモ代わりにここに記しておきます。
過去に私が使っていたもの、ネット上で広く紹介されているものをまとめておきます。
作り方も軽く載せます。参考にしながら作ってみてください。
基本的にはグローバル変数にスイッチを作成し、その切替でフォルダを出したり隠したりしています。
グローバル変数の扱いに関しては他の方が説明してくれている記事におまかせします。「KLWP シャッター」とかで検索してみてね。
横からカードが出てくる
初っ端から表現力が壊滅的で申し訳ありません。ただ、そのとおりなんですね。
かなり昔私が使用していたホーム画面で採用されていました。いわゆるサイドバーです。
右下の開店するマークを押すとグローバル変数の On/Off が切り替わって、カードが動く設定。
作成方法
- アイコン（画像）を並べる
- アニメーションを以下に設定
- アクション: スクロール
- 緩急: オーバーシュート
- （その他ご自由に）
- 各アイコンにタッチ→アプリの起動を設定
以上で完成。とっても簡単なアプリ一覧です。
参考に出している gif ではカードひとつひとつに異なるディレイを設定しています。
カード型でなくても、丸形アイコンでもよいでしょう。お好みで。
フローティングボタン風
ボタンを押すとその周りにアイコンが展開するやつ。カードのやつと同じ原理です。
OREFOLDER さんが作り方をとっても詳しく書いてくれています。私もこれを参考に作っています。
KLWPでマテリアルデザインなフローティングアクションボタン(FAB)を作る方法 – OREFOLDER
簡単な作り方
- ボタン用のアイコンを作る
- アプリ用アイコンを配置
- ボタン（グローバル変数スイッチ）によって起動するアニメーションを設定
- アクション: スクロール+フェードイン
- アプリ用アイコンを複製し各々に好きな機能を割り当てる
gif はスイッチを中心に展開するようにした例です。個別の向きにアニメーションを設定したかったのでグループ化は使いませんでした（グループ化も使えるかもしれないけど知らない）。
使用した背景（unsplash）
四角にふわっとひろがるフォルダ
トムとロイドさんの記事で紹介されているものを改めて説明するだけです。
第十回：マテリアルなドロワーのように「枠の中を円形に広がる」アニメの作り方【HowTo Kustom】 | トムとロイド – Tom and roid –
アプリを開いたときなどに画面内にブワーッと広がっていく背景をほうふつとさせるアイデア。
作成方法
- Root の背景を設定
- 図形1を作成
- 図形1の塗りスタイルをストロークに変更
- ストローク幅を300とかにしてめっちゃでかい図形にする
- 図形1の効果→マスクを「背景」に
- 図形2を作成
- 図形2を図形1の下（隠れるよう）に配置
- 図形2にアニメでアクション「近づく」を設定
- アイコンをグループ化し連動するアニメーションを設定
この説明だけではあまり実感がわかないと思いますので画像を使いながら解説します。
さっきの図形1が bg-window にあたります。画像左、黄緑の四角で表した箇所に配置します。
bg-window のストロークを調整して、背景が見える「窓」を作成。この「窓」がふわっと出てくるときの枠になります（水色の場所にある長方形 bg-plain は不要な円を隠すために使います）。
調整が終わったら bg-window のマスクを「背景」に設定。
マスクを設定すると右側のようになります。
図形2にあたる円を bg-window の下（アイテム一覧では bg-window より上）に配置し、グローバル変数変更用のアイコンスイッチを用意すると準備完了。
アニメーション「近づく」で大きくなる円が「窓」に沿って展開していきます。
本来は画面いっぱいに広がるはずの円を bg-window, bg-plaing が隠していて、「窓」部分には bg-window が無いから、そこだけに色がふわっと広がるわけです（伝われ）。
bg-plain を配置していなければ bg-window の無い箇所にも円がぶわっと広がっていきます。
トムとロイドさんの記事も読んで、自分で感じつつ作ってみてください。
使用した背景(unsplash)
おしまい
ふわっと広がるフォルダの手順と仕組みをどうにか言葉にしておこうと思って書き留めた次第です。
ここで紹介した作り方以外にも、同じものを作る方法があるはずです。正解はありませんのでご自身のアイデアでフォルダを作ってみてください。めんどくさがりやさんはランチャーのフォルダ機能を使えば良いと思います。
KLWP がまだの人はぜひ使ってみてください。
では、またお会いしましょう。
