KLWPで画像がスクロールして入れ替わるカルーセルを作ってみる

|

KLWPで画像のカルーセル表示をやってみました。
カルーセルというのは、ウェブサイトのトップページによくある、画像などが横にスクロールして切り替わっていくものです。設定した最後の画像の次が最初の画像になるようにして、継ぎ目を気づかせないようにするのがポイントです。

完成したサンプル

まずは完成したサンプルを動画で見てください。こんなものです。

だいたい30秒で5枚の画像が1周するようにしてますが、設定次第で枚数を増やしたり1周の時間を調整できます。

基本的な考え方

タイミングの計算がちょっと面倒ですが、考え方は簡単です。KLWPのアニメで「複雑な動き(complex animation)」を使い、画像ごとにタイミングをずらして移動させてるだけです。

  1. 各画像は最初は画面外に控えてる
  2. 指定した時間になると左に移動して、左端で止まる
  3. 少し留まった後にまた画面外へとスクロールしていく
  4. 画面外に出た後に透過度を100にして透明化
  5. 透明化したら最初の位置(右側の画面外)へ移動
  6. 最初の位置へ戻ったら透過度を0にする
  7. 最初に戻る

この動きを「複雑な動き」で作っていきます。

それぞれの設定

動かす画像を5つ用意し、それぞれにアニメで「複雑な動き」を設定していきます。1つ目と2-4つ目で微妙に変わります。(ちなみに、画像はサイズを揃えるために「図形」にFXテクスチャビットマップで貼り付けています。)

画像それぞれでアニメの設定は以下の部分は共通です。

実行 アニメ
アクション 複雑な動き
緩急 直線的
アニメーター 画像ことに別途設定
時間 300

「時間」はカルーセルが1周するのにかかる時間です。ミリセカンドなので、300で30秒、600で1分になります。

次に、アニメーターの部分(複雑な動きの中身)をそれぞれ設定していきます。

1個目の画像の「複雑な動き」設定

X オフセット -> 720.0 [普通]というのは、プロパティー -> 値 [緩急]にあたります。

0%…アニメの始まりは画面左端に位置します
-1%…1画面分(画像の大きさと同じだけ)左に移動し、画面外へ。この時透過度は0(不透明)
-2%…位置は画面外に出たまま、透過度を100(透明)に変化
-79%…透明化したまま、位置を右側の画面外へ移動
-80%…透過度を0(不透明)に戻す
-81%…画面左端(0%のときと同じ位置)へ移動

2-5個目の画像の「複雑な動き」設定

基本的な考えは同じで、2-5個目は画面外から画面内へ入ってくるタイミングが違うだけです。詳しい値は、上記画像をタップすると拡大されるので、それを見てください。

ダウンロード

zooper-iconcarousel.klwp
制作:orefolder
価格:無料

サイズ:765KB
ダウンロード

このカルーセルのみを使ったテーマファイルをダウンロードできるようにしておきました。KLWPのPro版を持っている方はダウンロードし、自分のスマホでどんな動きになっているのか試してみてください。

画像はグローバル変数で指定できるようになってます。デフォルトでは500pxのpopular.rssから最初の5つをそれぞれ設定してあります。


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

Random Posts

ジョルテッシモ:縦長スマホで使いたい縦スクロール型のカレンダー・スケジュール帳アプリ
イースターホーム【ホーム画面定期コンテスト】
mineoが通信の最適化だけでなくhttps(SSL)では帯域制御もしているとのことなのでMVNO14社20枚のSIMで試してみた
今つながってるWi-FiをQRコードで共有できるAndroid 10の新機能が便利!
Xiaomi Redmi Goレビュー:1万円以下で買えるAndroidの軽量版「Go Edition」搭載マニア向けスマホ
[ 春 ]【ホーム画面定期コンテスト】
snow_mt【ホーム画面定期コンテスト】
Xperia 1の2つの不満を解消するため、純正カバー「Xperia 1 Style Cover Touch」を購入
東京ゲームショウ2019のGoogle Play ラリーがなかなか厳しかった件
KLWPのテーマ特集:複数のテーマを含んだプリセットパック 5アプリ49テーマ (2018.04.15)
ZenFone Max Plus (M1) 購入:スッキリしてスベスベなボディを持った外観をチェック
Xperia X Performance 購入:見慣れぬメッセージに少しだけ戸惑う、少しだけ
Paperland Live Wallpaper:切り紙で作られた景色がアニメーションで流れるライブ壁紙
これはスマートウォッチの考えではダメだ!「PRO TREK Smart WSD-F30」発表体験イベントの衝撃が大きい!
壁紙を黒にするとスマホのバッテリーが長持ちするって本当?というわけで実験してみた