チュートリアル

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

Unihertz Atom LがAmazonにて販売開始!4インチ小型タフネススマートフォン
ソフトバンク、翌月合算お引き落としの対象金額の対象額を税込5,000円未満に変更
Googleストアが最安価格保証を日本でも開始
green【ホーム画面コンテスト2020】
GarminのウェアラブルデバイスでSuicaが利用可能に!2020年5月下旬以降に開始予定
Echo Flex専用スマートクロック発売!Echo Flexに時計表示を追加するアクセサリ
Twitter、読んでない記事をリツイートしようとすると注意されるように
不思議のダンジョン 風来のシレンが10万本突破記念で860円オフ!Androidアプリセール情報
KLWP/KWGTがv3.43にアップデート!ダークモード対応や接続済みオーディオデバイスの名称表示など
まくらぼ、睡眠ランキング搭載の睡眠計測アプリを11月1日リリース!ほか2020年10月26日の気になるスマホ関係ニュース
GoogleがPixel 4の15%引きのクーポンを一部ユーザーに配布中!Playストアの年末年始セールも
QRコード決済、総合満足度1位は「d払い」、利用頻度が高いのは「楽天ペイ」【MMD研究所調査】
Pixel 3 レビュー:すっかり馴染み、これからの2年を一緒に歩めるスマートフォン
北斎【ホーム画面コンテスト2020】
シャープ、AQUOS sense lite SH-M05とAQUOS R compact SH-M06にAndroid 9 PieへのOSアップデートを配信開始