KLWPで画像を延々ループで回転させる動きをつける

最近はホーム画面カスタマイズではKLWPが人気のようです。このアプリはライブ壁紙アプリですが、その内容をかなりカスタマイズできるというものです。GlaejaやZooper Widgetがライブ壁紙になったと考えると理解が早いと思います。

Google playKLWP Live Wallpaper Maker
KLWP Live Wallpaper Maker
制作: Kustom Industries
評価: 4.6 / 5段階中
価格: 無料 (2015/12/26 時点)

ダウンロードposted by: AndroidHTML v3.0

そして、ライブ壁紙ということでGlaejaやZooper Widgetでできなかったことでも、KLWPならできるというものがたくさんあります。そんなKLWPで可能になることの1つの例として、今回は「画像を回転させ続ける」ということをやってみます。

今回の題材

20151226-klwp-1

今回は、このホーム画面の左上にあるグラデーションしているリングを回してみます。これは、そうデレステこと『アイドルマスター シンデレラガールズ スターライトステージ』のロード画面その他の背景で回っているアレです。

以前、5周年企画でとくめいさんの作成したデレステホームではKLWPを使っていましたが、これが回っていませんでした。なので、ここで回してみます。

0.完成形

完成したもの(の上部分)はこのようになります。

1.画像の用意

まずゲーム画面からスクリーンショットを撮影し、それを繋ぎあわせたりして円になった画像を作ります。

d-ringd-ring-1

左はpng(288KB)、右はjpg(99KB)です。必要ならダウンロードしてください。

KLWPでの設定

20151226-klwp-220151226-klwp-3

KLWPで先ほどの画像を置いたら、タブから「アニメ」を選びます。
最初はなにもないので、右上の+から新規作成します。でてきた中の「なし」をタップ。

20151226-klwp-420151226-klwp-5

ここはアニメ実行のトリガーとなる部分です。「ループ」を選びます。
項目が増えたので、その下の「アクション」「Ease」を設定します。

20151226-klwp-620151226-klwp-7

アクションは「回転」、Easeは「Straight」です。
これでプレビュー画面内でも画像が回転し出します。

20151226-klwp-8

最後にスクロールして「時間」を調整します。
今回の場合は、1回転にかかる時間を指定、と思えばOKです。今回は180にしてみましたが、もっと遅くてもいいかもしれません。

完成

これで完成しました。左上の円が最初の動画のように回り始めると思います。

今回の一連の設定方法を動画にしてみました。説明などはないですが、やり方としては理解できるでしょう。

まとめ

KLWPのアニメーション機能を使えば、簡単に画像を回転させることができます。今回の動きの他にもアニメーションの項目は多々あり、組み合わせることでかなり自在にホーム画面を動かすことができるようになります。
ぜひ使ってみてください。

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

    これと同じものを作りたいのですが、よかったら作り方を教えていただけませんか?よろしくお願いします。

    • orefolder

      作り方は上に書いてあるとおりです。

      • 桑名晃平

        すみません。基となる高垣楓の画像はどこから探せばいいのでしょうか?

        • orefolder

          適当に「デレステ 壁紙」といったもので検索してみてください。

          • 桑名晃平

            ありがとうございました。

  • ぶひぞう

    先日、KLWPをダウンロードしました。
    ホーム画面作りの参考にさせてもらっています。
    どのようにすればいいのかわからないことがあるので、質問させていただけないでしょうか。

    横長の画像を左方向にスライドループさせようとしています。
    最後まで流れ切った後、再度最初から流す方法がわかりません。
    どのようにすればいいのでしょうか?

    • orefolder

      単に最初から流す(最初の地点に戻す)のであれば、「実行」を「ループ」に設定すればできます。画面外に流れきったかどうかの判定は「時間」「速度」で調整するしか無いと思います。

      そうではなく、左方向にスライドしていった時に、画像の右端と左端がくっついているような表現だと、また別の方法が必要になります。

      • ぶひぞう

        お返事ありがとうございます。
        やりたいことは、仰っていただいた後者の方で
        右端と左箸がくっついているような表現の方法がわからず、悩んでおります。

        • orefolder

          うーん…だいたいできたので記事にしてみます。

          • ぶひぞう

            まさか記事にしていただけるとは!
            ありかとうございます!
            楽しみにしています!

          • orefolder

            というわけで書きました。
            http://www.orefolder.net/blog/2017/02/klwp-guruguru/
            イマイチわかりやすく書けなかったのですが…。

PREVIOUS POST
NEXT POST
ANDROID
GIVES YOU
MORE