先日完成したホーム画面 、【湧き出す音符】
こちらの作り方を簡単にまとめてみました。
準備
必要なもの
- ホーム画面をカスタマイズしたいAndroid端末
- カスタマイズアプリ【KLWP】
- 素材
- アイディア
Android端末
これがなければ何も始まりません。
iOSでは残念ながらホーム画面カスタマイズは対応してないようです。
厳密に言えば脱○してゴニョゴニョすればできるかも…？
凝ったホーム画面を作る場合は性能の良いAndroid端末が好ましいと思いますが、
古い端末でも作ることはできるので、高性能端末である必要はなさそうです。
KLWP
私がホーム画面をカスタマイズする際に使ったアプリです。
このアプリはウィジェットではなく、ライブ壁紙アプリなのが特徴。
壁紙アプリなのに「タップしたらアプリを開く」などの機能を付けられる優れもの。便利。
素材
自分がどんなホーム画面を作りたいのか、それによって素材を用意する必要があります。
今回、私が作ったホーム画面で使用した素材は、背景画像とフォントだけです。
背景画像はネット上に転がっていたものをチョチョイといじっただけ。
フォントは、フリーフォントの「PixelMplus 12」をお借りしました。
デフォルト状態でもフォントやアイコンフォントなど、ちょっとした素材は用意されているので、最悪用意しなくてもなんとかなるかも。
アイディア
説明する程のものではないと思いますが、自分がどんなホーム画面を作りたいか、しっかりイメージしておく必要があります。
作りながら形を決めようとしても、何から手を付けて良いのかさっぱりわかりません。これに関してはモノ作り全てに共通することかな？
なので、何も思いつかないのであれば、とりあえず誰かのホーム画面をパクってみるのもありだと思います。
形を作る
カスタマイズアプリ【KLWP】の使い方に関しては、インターネット世界にたくさんの説明ページがあるので、そちらを参考にされた方がわかりやすいと思います。
私が主に参考にしたのは、orefolder様の解説ページ。
Googleで「KLWP」と調べると上位に表示されますし、詳しく丁寧に記事にされているのでオススメです。
ここからは、上記の動画で紹介しているホーム画面を簡単に解説します。
レイヤー一覧
- 背景、日時（グループ化重ねる）
- 吹き出し＆人（画像）
- 時・分・秒（テキスト）
- 月・日・曜日（テキスト）
- 音楽再生中に表示 （グループ化並べる）
- 左側（グループ化並べる）
- Title （テキスト）
- Artist （テキスト）
- 時間 （テキスト）
- 右側（グループ化並べる）
- 曲名（テキスト）
- アーティスト名（テキスト）
- 曲の位置 / 曲の長さ（テキスト）
- 左側（グループ化並べる）
- 音楽停止中に表示
- 空テキスト（テキスト）
- Play Music ? （テキスト）
- 空テキスト （テキスト）
- アイコン周りの円（図形 – 円）[アニメーション]
- 音符右 x3（アイコンフォント – 音符）[アニメーション]
- 音符左 x3（アイコンフォント – 音符）[アニメーション]
表示するものが少ないので、レイヤーも少ないです。
グループ化してるのは、位置調整を一括で管理したかったからグループ化しただけなので、グループ化する意味はないかもしれません。
レイヤーを見てお気づきと思いますが、アイコンから音符が出ているのではなく、
音符が湧き出ている所にアイコンを置いているだけです。
画像やテキストの配置で特別な方法はしておらず、ただ置いて位置や角度を調整しているだけ。
ホーム画面上でアイコンが置かれる位置に、「図形 – 円」と「アイコンフォント – 音符」6つを配置してあるだけの非常にシンプルなホーム画面です。
ちょこっとこだわっている点として、アニメーションです。
[図形 – 円]のアニメーション
アニメーションの基本的な設定方法は、どこかで調べてください。
私の説明よりもずっとわかりやすい記事がたくさんあるので…。
変更した設定項目
- 実行・・・[演算]
- アクション・・・複雑な動き
実行の部分は「音楽再生中はループ、それ以外はなし」を演算式で記述してあります。
|
1 |
$if( mi( state ) = PLAYING, LOOP_FW, DISABLED )$ |
アクション「複雑な動き」に関しては言葉で説明が難しいので、画像を載せておきます。
XY倍率を0.8倍から2.0倍へ、透過度を0%から100%へ、これだけです。
緩急を[直線的]にすることで動きに偏りが出ずスムーズな動きになります。
わざわざ「複雑な動き」を使う必要はないかもしれません。
倍率変更のアニメーションと透過度変更のアニメーションをそれぞれ用意する方法もあると思います。
上記の設定で、音楽再生中だけ円が「広がりながら消えていく」をループします。簡単ですね。
[アイコンフォント – 音符]のアニメーション
このレイヤーの調整が一番めんどくさかったかもしれません。
変更した設定項目
- 実行・・・[演算]
- アクション・・・複雑な動き
- 時間
- 遅延
実行の部分は[図形 – 円]と全く同じです。
音楽再生中だけループして、それ以外はなし。に設定してあります。
複雑な動きも映像を見ていただければ分かる通り 「放物線を描いて落下＆バウンド」 っぽく見えるように設定してあります。
例として音符右1のアニメーションで解説をしますと、
- X方向・・・直線的に一定量動かす。（普通でもいいかも？）
- Y方向・・・緩急（普通）をつけて上に移動した後、一定量下に移動してバウンド。
- 透過度・・・バウンドが始まるタイミングで透過し始めるように調整。
これだけで音符が「飛び出した後、バウンドしながら消滅」の完成です。
ひとつ音符が完成したので、音符右レイヤーを複製して増殖。
またX方向を逆向きにして音符左の完成。そして複製して増殖。
ここまでで６つの音符が湧き出すようになりました。
タイミングや移動距離の微調整
アニメーション設定の中の「時間」と「遅延」を少しずつ変えタイミングをずらし、「X方向」と「Y方向の上」の移動距離などを少しずつ変えて、ランダムに湧き出してる“風”に調整する。
これですべて完成です。
私はホーム画面下部のアイコンから湧き出る風に作りましたが、初期配置を別の場所に変えればどこからでも湧き出すように作れます。
さらに言ってしまえば、 「放物線を描いて落下＆バウンド」 以外のアニメーションもできますし、アニメーションのタイミングを変えて常時ループもできるでしょう。
簡単な解説なのでわかりづらい部分とかあると思います。
気軽にコメントやTwitterなどで聞いてもらえれば私の分かる範囲でお答えできますので、お気軽にご連絡ください。
ホーム画面カスタマイズ、KLWPユーザーもっと増えないかなぁ。
コメント