チュートリアル

KLWPでスクリーンごとに違う画像を表示し、フェードインアウトで切り替える

20160930-klwp-1

ホーム画面をカスタマイズしているとだんだんシンプル方面に行く人が多いです。そしてだんだん1画面ですべて収まるようにするパターンが多かったのですが、最近のKLWPを見ていると2画面3画面のものも増えている気がします。KLWPで色々なものが自分でデザインできるようになったからでしょうか。

そういった多画面のホーム画面を目指すのにいくつか段階があると思いますが、今回は「画面ごとに違う画像を表示させる。スクリーンの移動の時はフェードインアウトで切り替える」ということをやろうと思います。

完成図

まず、今回どんなものをやるのか、実際の動きを見てください。ちょっと画質悪いですが、わかると思います。

画面上部の画像が、スクリーンを左右に動かすとフェードインアウトで切り替わってますよね?これをやります。

下準備

20160930-klwp-420160930-klwp-5

今回は3画面のホーム画面でやります。まず最初の設定として、ホームアプリの設定で3画面にし、KLWPの設定も3スクリーンにしておきます。

1つめ(中央)の画像を設定する

20160930-klwp-220160930-klwp-3

1つ目の画像として、基本となる中央画面の画像を設定します。
ここは普通に画像で好きなものを表示させます。このままだと隣の画面に行ってもそのまま表示され続けるので、アニメで以下のように設定します。

実行 スクロール連動
アクション 消失
ルール 中央
中央 画面中央
20160930-klwp-620160930-klwp-7

これで中央画面から別の画面に行くと画像がフェードアウトするようになりました。

左右の画面の画像を設定する

20160930-klwp-8

次に左画面の画像を設定します。基本的には同じように画像を置き、アニメで以下のように設定します。

実行 スクロール連動
アクション 消失
ルール 中央
中央 画面1

最後の中央が「画面1」に変更されています。これはつまり、画面1(左画面)から外れたらフェードアウトする、ということです。

20160930-klwp-9

これで画面1と画面2(中央画面)を移動するとフェードインアウトで切り替わるように見えます。

20160930-klwp-10

画面3でも同じように設定し、中央は「画面3」にすれば、こちらも同じようにフェードインアウトします。

これで完成です。簡単でしたね。今回は画面上部の画像でやりましたが、これが画面全部を覆うような大きなものでやれば、「画面ごとに壁紙が変わる」ということもできます。


アニメルール中央は、こういったスクロール連動で表示オブジェクトを動かす時に便利なパラメータです。自分でいろいろやってみないと理解しにくいかもしれませんが、試していると「あんなこともできそう、こんなことはできるか?」とアイデアが湧いてきます。ぜひ挑戦してみてください。


KLWPの使い方についてはこちらのページにてまとめています。使い方に困ったときなど、こちらのページも参考にしてください。

Random Posts

ファーウェイ、HUAWEI Mate 20 Proに Android 10 / EMUI 10のアップデートを配信
ドコモ、料金支払いがクレカの場合は端末を分割購入後100日以内でもSIMロック解除が可能に
+Style、最大約54%オフの「新生活応援セール」を開催!スマートウォッチやヘッドホンも対象
ワイモバイル、Android One S1 / S2 / S4にAndroid 9 PieへのOSアップデートを配信開始
Redmi Note 7が189.99ドル~、Mi 9が449.99ドル~!Banggood割引クーポン情報
Nest Miniが2,000円引き、Nest Hubが5,500円引き!Googleストアにて新生活セール開催!
SOUNDPEATS TrueFree2 レビュー:イヤーフックでフィット感が向上!人気モデルの後継となる完全ワイヤレスイヤホン
Pixel 3 レビュー:すっかり馴染み、これからの2年を一緒に歩めるスマートフォン
初期費用が無料になるLINEモバイルのエントリーパッケージが29円のタイムセール!
ASUSがZenFone 7らしき新製品発表会を10月21日14時より開催!ティザーページが登場
楽天モバイル、現在契約中の回線も2019/10以降に自社(MNO)回線へ移行予定と案内
CHUWI Hi9 Plusで格安SIMは使えるのか? 16回線で通信テストしてみた結果…
シャープ、AQUOS sense3 plus SH-M11にAndroid 10へのOSアップデートを配信開始
ポイント還元で実質0円も!BIGLOBEモバイルでmoto g8 power liteとmoto e6sが取扱開始!
Pixel 4a 画面保護フィルム PDA工房ペーパーライク レビュー:ざらざらな質感はいいがカラーノイズが目立つ