（gifのせいで重いです）
ホーム画面はアプリとウェジェットの二つで構成することが多いと思います。
そこでよく使うアプリを格納しておくフォルダ的なものの原型、アイデアを個人的なメモ代わりにここに記しておきます。
過去に私が使っていたもの、ネット上で広く紹介されているものをまとめておきます。
作り方も軽く載せます。参考にしながら作ってみてください。
グローバル変数にスイッチ（ On/Off 切り替え）を作成し、その切替でフォルダを出したり隠したりしています。扱いに関しては他の方が説明してくれている記事におまかせします。「KLWP シャッター」とかで検索してみてね。
横からカードが出てくる
初っ端から表現力が壊滅的で申し訳ありません。ただ、そのとおりなんですね。
かなり昔私が使用していたホーム画面で採用されていました。いわゆるサイドバーです。
右下の回転するマークを押すとグローバル変数の On/Off が切り替わって、カードが動く設定。
作り方
- フォルダの背景を作成しアニメの実行に「グローバル変数の切り替わり」を設定
- アイコン（画像）を画面外に並べ、変数の切り替わりに連動させる
- アニメーションを設定
- アクション: スクロール
- 緩急: オーバーシュート
- （その他ご自由に）
- 各アイコンにタッチ→アプリの起動を設定
以上で完成。とっても簡単なアプリ一覧です。
参考に出している gif ではカードひとつひとつに異なるディレイを設定しています。
カード型でなくても、丸形アイコンでもよいでしょう。お好みで。
回転しながら出てくる
十徳ナイフみたいに、同心円状に出てくるやつです。
作り方
- 画面外にアイコンや画像を配置
- アニメに以下を設定（2種設定します）
- 回転 > 右下揃え（画面）
- 回転 > 中央揃え（モジュール）
- 好きな角度になるまで調整
下揃え（画面）なんかも使い勝手がいいかも?画面外の位置を調整すれば何層でも展開可能。拡張性はバッチリ。
モジュールの方で調整を加えないとアイコンが変な向きになって出てきます。
背景が割れて出てくる
画像を背景ではなく「画像オブジェクト」として配置することでガバッと動かします。
作り方
- キレイに分割した画像をキレイに配置（大事!）
- 上部の画像を上にスクロールするようにアニメを設定
- グループ化（重ねる）を画像の下層に配置
たったこれだけ。画像をキレイに分割するのが大変かも?
大きく動いて気持ちがいいですね。
使用した背景(wallhere)
四角にふわっとひろがるフォルダ
トムとロイドさんの記事で紹介されているものを改めて説明するだけです。
第十回：マテリアルなドロワーのように「枠の中を円形に広がる」アニメの作り方【HowTo Kustom】 | トムとロイド – Tom and roid –
アプリを開いたときなどに画面内にブワーッと広がっていく背景をほうふつとさせるアイデア。
作り方
この説明だけではあまり実感がわかないと思いますので画像を使いながら解説します。
さっきの図形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 がまだの人はぜひ使ってみてください。
では、またお会いしましょう。
