【Bubble】画面表示の際にアニメーションを追加したい。
もくじ
画面表示時に描画されるアニメーションを追加する方法
STEP①：不透明の「Floating Group」をめいっぱいに配置する
まずは、Floating Groupを画面いっぱいに表示できるように広げて配置しましょう。
ですが、このままだとFloating Groupが透明なのでほかの要素を隠してくれません。
なので、Floting Groupの背景を不透明度100%の白色で埋めてしまいましょう。
Floating GroupのStyleをRemove styleで消して、以下のように設定すればOKです。
そうすると以下のようにFloating Groupで要素が隠れます。
この上にアニメーションを配置していきます。
STEP②：Floating Groupの真ん中にアニメーションを配置する
次に、アニメーションとなる要素を配置しましょう。
アニメーションになる要素としては以下のようなものがあります。
- GIF画像やPNG画像を埋め込んだimage要素
- Lottieファイルを読み込むスクリプトを書いたHTML要素
①GIF画像やPNG画像を埋め込んだimage要素
Image要素にはGIF画像やPNG画像を設定できますので、用意したアニメーション画像をアップロードして配置してみましょう。
シンプルで簡単です。そして超軽量です。
②Lottieファイルを読み込むスクリプトを書いたHTML要素
軽量でアニメーションを描画できるライブラリとして有名なLottieを使ってアニメーションを描画することも可能です。
Bubbleではありませんが、以下のアニメーションもLottieを使っています。
この場合、以下のサイト等から好きなアニメーションを持ってくる必要があります。
LottieFiles
LottieFiles: Download Free lightweight animations for website & apps.
Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie anim...
好きなアニメーションを選択し、以下の画面から<html>を選択します。
そうすると以下のような画面が表示されるので、チェックボックスのControlsとHoverのチェックを外し、生成されたのコードをコピーしましょう。
BubbleにはHTMLを直接書くことができる要素として「HTML」が用意されていますので、画面にドラッグして配置しておきます。
そのHTML要素に対して先ほどコピーしたコードを埋め込みます。
すこしやることはありますが、非常に綺麗なアニメーションを描画することができます。
STEP③：画面読み込み時の処理をWorkflowに追加する
最後に画面読み込み時の処理を追加する必要があるので、Workflowに移動しましょう。
まずは、「Click here to add an event...」をクリックして条件は「General」カテゴリの中から「Page is loaded」（画面読み込み完了時の処理）を選択しましょう。
次に、「Click here to add an action...」をクリックして処理を追加していきます。
最初の処理は「Navigation」カテゴリの中から「Add a pause before next action」（次の処理までの遅延）を選択します。遅延時間はお好みですが、画像では1000ms（=1秒）に設定しています。
ここまでの設定は、「画面の読み込みが完了した1秒後に次の処理を実行する」という意味になります。（1秒の遅延はわざと画面表示時にアニメーションを描画したいからです。）
次に、アニメーションがいきなり消えてしまわないようにフェードアウト（ゆっくり消えていく）する処理を設定します。
処理は「Element Actions」カテゴリの中から「All elements」の「Animate」を選択し、「Element」には先ほどのFloating Groupを、「Animation」には「Transition FadeOut」を選択しましょう。
Workflowの完成形は以下のようになります。
これでプレビューを押すと、画面更新時に以下のようにアニメーションが表示されます。
