[Bubble]ホバーアニメーションでGroup Focusを表示するための方法

みなさんこんにちは! Ryoです!

普段は学生NoCodeエンジニアとして、Bubbleをメインとした受託開発を行ったり、NoCode学生会という学生限定のNoCodeオンラインサロンの運営をしております。

今回は、以下のように、ボタン(または任意の要素)がホバーされたときにGroupFocusを表示するための方法をご紹介します。

.bubbleにてWebアプリを作る際には、ホバーアニメーションはよく使われるので是非マスターしてほしいと思います!

それでは行ってみましょう!

配置するエレメントの基本設定

まずButtonエレメントを設置します。

このButtonエレメントはホバーするために使うため、ここでは[ホバーボタン]と呼びます。

次にホバーボタンが、ホバーされた時に表示するためのGroupFocusエレメントを設置します。

場所に関してはどこでも大丈夫です。

そしてエディターのReferance elementの部分に[Button ホバーボタン]を選択します。

この操作によって、GroupFocusがホバーボタンに付随するようになります。

次にGroupFocusをホバーで、表示させるためのトリガーとなるボタンを設置します。

このボタンは全くボタンの役割をしません。

エレメントの中でボタンが1番分かりやすいと考えたため、ここではボタンエレメントを使っています。

なのでInputエレメントなどでも代用することができます。

また、このボタンはユーザーには一切見えないようにするためここでは「隠れボタン」と呼びます。

次に、このボタンのエディターを開きます。

そこでStyleの部分の設定が[Primery Button]になっているためRemove Styleを押してStyleをなくします。

そして、完全に透明にするためにColorの初期設定で[100]となっている部分を0にします。

これをすることによって彩度がなくなり透明になります。

そしてThis element is visible on page loadのチェックを外します。

Conditionalの設定

次にこの隠れボタンのConditionalの設定をします。

まずWhenの部分に[Button ホバーボタン is hovered or GroupFocusA is hovered]と入力します。

そしてSelect a property to change when trueの部分には[This element is visible]を選択します。

そしてチェックを入れます。

この一連の操作によって、ホバーボタンまたはGroupFocusがホバーされている間は隠れボタンが表示されることになります。

ちなみに明度が0になっているのでユーザーには見えないようになっています。

ワークフローの設定

次に、ワークフローを設定して2つのイベントを作っていきます。

まずワークフローのClick here to add an event…のGeneralから[Do When Condition is True]を選択します。

そしてRun thisの部分を[Every time]に変更ます。

Only whenの部分には[Button 隠れボタン is visible]と設定します。

次にClick here to add an action…を選択します。

そして[Elements Actions]→[Show GroupFocusA]を選択します。

次に2つ目のイベントを作ります。

先程と同様に[Do When Condition is True]を選択します。

そしてOnly whenの部分に[Button 隠れボタン isn’t visible]を入力します。

それからClick here to add an action…から[Elements Actions]→[Hide GroupFocusA]を選択します。

これで完成です。

しっかりできていれば以下のようなホバーアニメーションができているはずです。

これらの一連の操作によって、隠れボタンが表示されている時はGroupFocusを表示、隠れボタンが非表示の時はGroupFocusも非表示にすることができています。

あとがき

今回の記事をご覧いただきありがとうございました。

このアイデアを使いこなせば、ボタンがホバーされたときに他の要素をアニメーションさせることもできます。かなり応用できるテクニックなので、ぜひ他の場合にも使ってみてください。

ただし、ワークフローの数が多くなりがちなのでそこは注意してください。

今後もこのような面白いBubbleのテクニックをどんどんご紹介していきますので、他の記事もぜひご覧ください!

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn

Ryo

Bubbleエンジニア
NoCode学生会代表
NoCodeCamp Bubble公認エキスパート

目次