【Custom】KLWPで製作中 - スクリーンインジケータ、アクションバーアイコンを作ってみた


こんな感じで動かしてみました。
システムモニタ表示に関して、気温など一部の情報がうまく拾えていないため、未実装となっている部分がありそうです。
あとテキスト表示パーツは日本語が使えません。このへんも追加実装待ち。

スクリーンインジケータ



これは「Shape」のみで作れます。図形の種類はレクタングルを選択、パディングを使って位置を合わせます。
サイドパネルよりも手前に表示したかったので、パーツの追加位置はサイドパネルよりも下になります。
KLWPのパーツは下にあるものほど手前に表示されます。

重要なのはアニメーションで、「Scroll Invaeted」を選択します。これは逆方向へのスクロールアニメです。
これによって「ページ2からページ1へ(左から右にスライド)」した時に、このパーツは右から左に動いてくれます。

また、左右パディングとスクロールスピードを調整することで「1ページ切換えた際どこまでスクロールさせるか」も決められます。これは設置するアイテムの大きさや動かしたい位置によって数値が変動します。
これに気づいたおかげで左右のパネルを少し大きくできました。

動くアクションバーアイコン


できれば「回転」アニメが欲しいところですが、今後の実装待ちとなりそうです。



アイコン1つにつき「Image」パーツを1つ作成します。設置したアイコンは「両サイドの三(screen2)」「<と>(screen1 / screen3)」です。
アイコン素材はGoogle公式のものを使用しています。

マテリアルデザイン化された750個のアイコンをGoogleが配布 | オクトバ

アニメーションの種類が異なるためグループ化はしていません。



「三」のほうは「Scale」アニメを使用し、ページのスクロールに伴って縮んでいくようにしています。

「<」と「>」には2種類のスクロールアニメを指定。
1つ目は同じく「Scale」で、ページのスクロールに伴って拡大されていく動きをします。
2つ目は「Scroll Inverted」を指定し、画面外から挿入されるようなアニメーションにしてみました。

ちなみに「Scroll Inverted」を入れないと次のような動きになります。


好みによっていろいろできるところも良いですネ。

そんな感じ。