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

Android 7.0以上で画面の表示サイズを変更する-開発者向けオプションではより細かく設定可能
超小型端末Jellyは「使える」のか? ほぼ同じ大きさのElephone Qで画面や文字入力をチェック!
AMAZFIT Stratos レビュー:心拍計もGPSもしっかり「使える」スポーツ用防水スマートウォッチ
Playストアのアイコンが新しいものに変更中 -ショッパー袋から三角画像のみに
【今日のホーム画面】ストックサイトのテンプレートをもとにしてホーム画面に
第7回ホーム画面カスタマイズ定期コンテスト 投票結果発表! 1位は「カラフルシャッター(フラット)」
AQUOS sense plus SH-M07 購入:スッキリしていて妙に馴染む安心感のあるスマホ
【今日のホーム画面】爽やかな夏っぽく、そしてシンプルに
OnePlus 5T 公式のガラスフィルム OnePlus 5T 3D Tempered Glass Screen Protector を購入
Pixel Home+【あなたのホーム画面見せてください 2018】
Google Home 開封の儀&ファーストインプレッション:小さくてかわいい未来がやってきた!
UMIDIGI A3 の公式アンボックス動画が公開!安く手に入る11.11プロモーションはあと3日
Playストアでこれまでに課金したアプリと合計金額を確認してみる
Semiro Smart Bracelet V10 レビュー:シンプルでバッテリーも十分なスマートブレスレット
Xiaomi Mijia SJYT01FMレビュー:スマホでも手ブレの少ないヌルヌル映像が撮れる!