MENU
おすすめプログラミングスクール紹介用バナー
Webpia編集部
Webpiaはプログラミングとノーコードについて紹介するWebメディアです。主に10~30代向けに記事を執筆しております。

【Bubble】画面表示の際にアニメーションを追加したい。

当サイトはページの一部でPR活動を実施し、得られた収益で運営されています。広告費用や収益性を考慮したランキング付けは、一切行なっておりません。詳細は、サイトポリシーWebpiaでコンテンツが出来上がるまでを参照ください。

もくじ

画面表示時に描画されるアニメーションを追加する方法

STEP①:不透明の「Floating Group」をめいっぱいに配置する

まずは、Floating Groupを画面いっぱいに表示できるように広げて配置しましょう。

ですが、このままだとFloating Groupが透明なのでほかの要素を隠してくれません。

なので、Floting Groupの背景を不透明度100%の白色で埋めてしまいましょう

Floating GroupStyleRemove styleで消して、以下のように設定すればOKです。

そうすると以下のようにFloating Groupで要素が隠れます。

この上にアニメーションを配置していきます。

STEP②:Floating Groupの真ん中にアニメーションを配置する

次に、アニメーションとなる要素を配置しましょう。

アニメーションになる要素としては以下のようなものがあります。

  1. GIF画像やPNG画像を埋め込んだimage要素
  2. Lottieファイルを読み込むスクリプトを書いたHTML要素

①GIF画像やPNG画像を埋め込んだimage要素

Image要素にはGIF画像やPNG画像を設定できますので、用意したアニメーション画像をアップロードして配置してみましょう。

シンプルで簡単です。そして超軽量です。

②Lottieファイルを読み込むスクリプトを書いたHTML要素

軽量でアニメーションを描画できるライブラリとして有名なLottieを使ってアニメーションを描画することも可能です。

Bubbleではありませんが、以下のアニメーションもLottieを使っています。

この場合、以下のサイト等から好きなアニメーションを持ってくる必要があります。

好きなアニメーションを選択し、以下の画面から<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の完成形は以下のようになります。

これでプレビューを押すと、画面更新時に以下のようにアニメーションが表示されます。

よかったらシェアしてね!
もくじ