KLWPのグローバル変数とアニメでホーム画面にシャッターやサイドバーを付ける

|

2011-12年ごろ、ホームアプリのスクリーン切替時のエフェクトをパラパラアニメのようにしてシャッターを付けるのが流行りました。そういった「ギミック」がホーム画面カスタマイズの面白さの1つでした。

KLWPを使うと、シャッターやサイドバーといった画面タップで起動するアニメーションが簡単に、そして自然な動きで作ることができます。今回はそのシャッターの作り方を解説していきます。

具体的には、上の動画のように矢印部分をタップすると黒いシャッターが下りてきたり上がったりします。

グローバル変数(スイッチ)を作成

まずは動作を開始するためのトリガー、スイッチを作成します。

20151229-klwp-120151229-klwp-2

KLWPの設定画面、タブの右の方に「グローバル」というのがあります。ここで右上の+ボタンから変数を新規作成します。
名前はなんでもいいです。タイプはOn/Offスイッチにします。

20151229-klwp-3

これでオンオフ切り替わるスイッチ変数ができました。

スイッチ切り替えボタンを作成

20151229-klwp-420151229-klwp-5

続いて、今作成した変数をオンオフするためのボタンを作成します。
ボタンとなるものはなんでもいいですが、今回はFontIconを使って矢印を表示させました。この矢印のメニュー「タッチ」で1回タップ時の動作で「グローバル切り替え」を選びます。切り替えるグローバルは先ほど作成したものです。

20151229-klwp-6

これで矢印をタップするたびに指定したグローバル変数をオンオフするスイッチができました。

シャッターの作成

20151229-klwp-720151229-klwp-8

続いて、覆いかぶさるシャッターを作成します。
まずはアイテムで「グループ化(重ねる)」を追加します。そしてそのグループの中に「図形」を作成します。この図形がシャッターとなります。とりあえずシャッターが降りたものとして作成しましょう。

20151229-klwp-920151229-klwp-10

図形以外にも、シャッターとなる部品を作ります。
それが終わったら、「グループ化(重ねる)」のメニューから「アニメ」を選択し、実行トリガーで「グローバルスイッチ」を選択します。

20151229-klwp-1120151229-klwp-12

アニメの設定は以下のようにします。

アクション…スクロール
Ease…Straight
アングル…270

これでグローバルスイッチのオンオフで「グループ化(重ねる)」がスクロールするアニメができました。確認してみましょう。

FontIconで作った矢印をタップしてグローバルスイッチがオンオフされ、それをトリガーにシャッターがスクロールされています。

シャッターアニメの基本は以上です。次からはアニメをもっと加えてより「それっぽく」していきます。

矢印を回転させる

シャッターが上に上がった時に、ボタンが上向きの矢印のままだとそれをタップしても降りてくるようには思えないですよね。
そこでグローバルスイッチのオンオフで矢印を回転させます。

20151229-klwp-1320151229-klwp-14

矢印のメニューから「アニメ」を選び、実行に「グローバルスイッチ」を選びます。さきほどのシャッターと同じですね。
アクションに「回転」を選び、量を「50」に設定します。こうすることでオンオフで半回転するようになります。

矢印もシャッターの上に置いて一緒に移動させる

半回転したとしても、その場に矢印が残っているとどうにも不格好です。なので矢印もシャッターと一緒に上へ移動してもらいます。

20151229-klwp-1520151229-klwp-16

設定はシャッター部分のスクロールを作った時と同じです。実行に「グローバルスイッチ」を選び、アクションは「スクロール」アングルは「270」です。

20151229-klwp-17

これで矢印は「グローバルスイッチ」をトリガーに「回転」と「スクロール」の2つのアニメを実行するように設定されました。こうして複数のアニメを組み合わせることで、より面白い動きが実現できます。

どうでしょう、最初のものに比べ、より「それっぽく」なったではないでしょうか。

応用でサイドバーも簡単に

ここまでで作成した「シャッター」と同じようにして、アプリでよくある「サイドバー」も簡単に作ることができます。

簡単に言ってしまえばスクロールの方向が上下か左右かの違いしかありません。ただ、今回はスイッチを2箇所に配置し、メニューボタンをタップしてサイドバー出現、サイドバー以外の部分をタップするとサイドバー退場としました。

サイドバーと一緒に画面を覆うような半透明の黒い図形を表示させ、それをタップするとグローバル変数がオンオフするようにしてあります。

見た目的には作りこめていないのですが、動きとしてはなかなか面白いと思います。

まとめ

KLWPのアニメはとても面白く、そして奥が深いです。トリガーとなるのは今回使った「グローバル変数」だけでなく、スクロール連動だったり、スマホのアンロックだったりと様々です。
複数のアニメを組み合わせることで動きもより自然なものにできたりしますので、このあたりも研究のしがいがありそうですね。

Random Posts

【テーマはフラット】第7回ホーム画面カスタマイズ定期コンテスト開催のお知らせ
FGO 邪ンヌ風ホーム【ホーム画面コンテスト2017】
先着500台は19.99ドル! UMIDIGI Uwatch2が限定激安価格で7/15より販売開始!
LINEモバイルのau回線版を契約しました
Xiaomi Mijia SJYT01FMレビュー:スマホでも手ブレの少ないヌルヌル映像が撮れる!
Speedometer Battery:自動車のスピードメーターのようなバッテリー残量ウィジェット
Pixel 3a用にミヤビックスのOverLay Plus 反射防止保護フィルムを購入!サイズはバッチリ!
UMIDIGI F1 Playが発売記念価格で199.99ドル!AliExpressのセールで他の機種も最安値に!
Tronsmart S5 レビュー:片耳でも両耳でも使える使い勝手のいい完全ワイヤレスBluetoothイヤホン
【今日のホーム画面】ストックサイトのテンプレートをもとにしてホーム画面に
トリプルカメラのUMIDIGI A5 Proが無敵の99.99ドル!UMIDIGIファンフェスティバルを開始!
Androidの歩数計アプリ10選 2017年版-見た目と使いやすさ、バッテリー消費などを比較
KLWPのテーマ特集:最近見つけた無料でカッコいいテーマ6個 (2019.06.09)
ZenFone Max (M2) 開封の儀:メタル素材の背面はスタンダードだが安心して持ててGood
常用より非常用、3000円で災害時に備えようLiberFlyerのモバイルバッテリー「Chargi-Q mini」レビュー