波及効果（リップル効果）を利用したボタンコンポーネントの作成

2024/06/25

はじめに

波及効果（リップル効果）とは、ボタンが押されたような効果を与えることで、UIの美観を高めるデザイン手法である。このエフェクトに適用されるアニメーションは、どのボタンがクリックされたかに応じて変化する。このエフェクトはGoogleのマテリアルデザイン言語で広く使われており、多くのウェブサイトで実装されています。難しそうに聞こえるかもしれませんが、ProtoPieではtoLayerXやtoLayerYのような定義済みの変数を使い、toLayerXやtoLayerYのような数式を適用することで、簡単にこのエフェクトを実現することができます。それでは始めましょう。

このレッスンで学ぶこと

定義済み変数を理解する： $touchX と $touchY
計算式を理解する：$touchX と $touchY
波及効果を作る
将来使用するためにボタンをコンポーネントに変換する

始める前に

チュートリアルに進む前に、定義済みの変数"$touchX/$touchY "と数式 "toLayerX/toLayerY "を理解しましょう。

1. 「touchX "はタッチが登録された場所のX座標を表します。同様に、"$touchY "はタッチが登録された場所のy座標を反映する。

このレッスンでは、"$touchX/$touchY "を使って、xとyの座標でボタンがクリックされたときの波及効果をトリガーします。

2. 「toLayerX "はコンテナやコンポーネントからの相対的なx座標を返す。同様に、"toLayerY "はコンテナやコンポーネントからの相対的なy座標を返します。

コンテナやコンポーネント内のレイヤーは、その中にあるコンテナやコンポーネントからの相対座標を制限します。

toLayerX(containerName:LAYER,x:NUMBER,y:NUMBER) → NUMBER
toLayerY(containerName:LAYER,x:NUMBER,y:NUMBER) → NUMBER

これらの例を自分で操作して、どのように機能するかを理解してください。

toLayerX(Container 1, 100, 200) → 画面に対するx座標100を基準としたコンテナ1に対するx座標
toLayerY("Container 1", 100, 200) → 画面からの相対的なy座標200を基準とした、コンテナ1からの相対的なy座標

ProtoPieの要素位置は親コンテナからの相対位置であることを理解しておいてください。親コンテナがない場合は、シーンからの相対位置になります。"$touchX/$touchY "はシーンからの相対位置しか返しませんが、この場合、ボタンはコンテナでグループ化されていると仮定します。そこで、"toLayerX/toLayerY "という式がその役割を果たすことになる。

ステップ・バイ・ステップの手順

1. 波紋を作る

1. ボタン容器の中で、以下のことを行う：

a. 幅と高さが0の楕円を作成。

b. この楕円を白（#FFFFFFF）で透明にする（Opacity = 0%）。

c. 楕円の原点を中央（x=50, y=50）に設定。

d. 名前を "Ripple "とする。

2. Button コンテナに Tap トリガーを追加します。Rippleレイヤーに以下のレスポンスを追加し、波及効果を持たせます。

Scale 1 (Scaling up the oval)

Scale to: 600, 600
Start Delay: 0s
Duration: 0.8s

Scale 2 (Scaling down the oval)

Scale to: 0, 0
Start Delay: 0.8s
Duration: 0s

Opacity 1

Opacity: 40%
Start Delay: 0s
Duration: 0.4s

Opacity 2

Opacity: 0%
Start Delay: 0.4s
Duration: 0.4s

このステップを行うと、楕円形がタップ時の波紋のように拡大縮小されます。上記のレスポンスに対して、好きなアニメーションイージングを自由に選択できますが、リアルな波紋効果を得るには、ease in & outかcubic-bezierが望ましいです。

💡 なぜスケールと不透明度応答を使うのか?

波及効果は、作成した楕円形が拡大縮小し、その後透明になることで得られます。拡大縮小と不透明度の遅延は、リアルな感じを与えます。

3. それでは、波紋をボタンがクリックされた場所に移動させましょう。波紋レイヤーに移動トリガーを追加します。ここで、移動値を塗りつぶすために2つのオプションがあります。

オプション1: "$touchX/$touchY "と "toLayerX/toLayerY "を組み合わせる。

Xを入力：toLayerX('Button',$touchX,$touchY)
Yを入力: toLayerY('Button',$touchX,$touchY)

オプション 2: "$touchX/$touchY" のみを使用する。

Xを入力： $touchX - 87
Yを入力： $touchY - 378

💡 なぜこれらの数式を使うのか？

Rippleレイヤーを移動させたいからです。RippleレイヤーはButtonレイヤーの子なので、Rippleレイヤーを移動させるときは、Buttonレイヤーの下の座標を使う必要があります。ご存知のように、($touchX,$touchY)はシーン座標として働きます。この式が行うのは、シーン座標の位置をButtonレイヤーのローカル座標の位置に変換し、ボタンの設定範囲内に保つことです。

4. 最後に、"Button "レイヤーの "Clip Sublayers "チェックボックスにチェックを入れます。

💡 なぜ「サブレイヤーをクリップ」するのか？

Rippleレイヤーはボタンレイヤーのサブレイヤーです。Buttonレイヤーの「Clip Sublayers」にチェックを入れると、「Button」レイヤーのサブレイヤーはマスクとして機能するため、ボタンの境界を越えて表示されなくなります。

2. 将来使用するためにボタンをコンポーネントに変換する

1. Button コンテナを選択した状態で、ツールバーの Component ボタンをクリックし、コンポーネントとして変換します。

2. メインシーンで、Buttonコンポーネントを動かしてみて、その動作を確認してください。

3. 前のステップでオプション2（"$touchX/$touchY "のみを使用）を選択した場合。リップルが正しい位置に表示されないことに気づくでしょう。

これは87と378が固定数字だからです。ボタンを移動すると、ボタンコンテナの位置が同じでなくなるため、87と378は正しくなくなり、更新する必要があります。

4. では、動的な値で修正しましょう。コンポーネントシーンに移動し、オプション2の移動値を次のように変更します：

X: $touchX - 'Button'.x
Y: $touchY - 'Button'.y

💡 'Button'.xと'Button'.yは87と378の自動更新バージョンです。このため、「Button」コンポーネントがどこにあっても、波及効果は自動的に適切な場所に表示される。

完成です！

おめでとうございます。このように、ProtoPieを使えば、1行もコードを書くことなく、この素晴らしいUI効果を実現することができます。波及効果をぜひ試してみてください！

CEO : Tony Kim