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の使い方についてはこちらのページにてまとめています。使い方に困ったときなど、こちらのページも参考にしてください。

この記事が気に入ったら
いいね!しよう
 シェアする  ツイートする
  • ねこ

    こちらを参考に、ホームアプリで画面2を追加して
    画面1にある画像にスクロール連動のアニメーションを設定したのですが
    プレビューでは動いても実際の壁紙では反応しません。
    実際の壁紙では、常に消えた状態で、スクロールしても反応がなく
    画面1、画面2どちらにも表示されません。
    壁紙を再設定したり、スマホを再起動したりしたのですが改善されません。
    何が原因なのか、お心当たりはありませんでしょうか?
    ホームアプリはNova、Androidは4.4を使っています。

    • orefolder

      うーん、実際の中身を見てみないとなんとも言えませんが、とりあえずアニメーションなど無しで表示されるか試したり、ルールやその他の項目をいろいろ変えてみるといいと思います。
      プレビューでは表示されるということは、なんらかで画像の指定がうまく行ってないのかもしれません。

      • ねこ

        お返事ありがとうございます。
        アドバイスいただきました通り、ルールやアクション
        画像などをいろいろ変えてみたのですが、変化なしでした。
        今あるものをすべて削除し、図形で作った四角だけで試してみましたが
        これも同じ状況となり、困り果てております。
        もし、よろしければ状況の確認をお願いできませんでしょうか。

        http://fast-uploader.com/file/7045062624234/
        パスワード「123」

        ご面倒をおかけいたしますが、お手伝いいただけるとありがたいです。

        • orefolder

          試してみましたが、こちらでは正常に表示されますね。画面1で白い四角があり、画面2に行くと消えます。
          Huawei P9(Android7.0)と302HW(Android4.4)で試してみました。
          機種問題とかなんですかね。力になれずすいません。

          • ねこ

            わざわざありがとうございます。
            そうですか。。。了解しました。
            一度、KLWPをインストールし直してみます。
            お手数をおかけいたしました。

PREVIOUS POST
NEXT POST
ANDROID
GIVES YOU
MORE