Studioでローディング風アニメーションを作成する方法

Studioでは「条件付きスタイル」を使って、マウスで要素にホバーした際などの特定の条件下でデザインの見た目や形を変えることができます。この機能を利用して、通常時と特定条件下の状態を設定し、２点間のトランジション（例えば0.5秒かけて色が変わるなど）を適用することで、アニメーションを作り出します。

条件付きスタイルとトランジションについて詳しくは、次の記事をご覧ください。

アニメーションを表示する枠を作るため、ボックスをエディタ上に配置します。

この枠は、画面いっぱいに表示したいので、横幅100%、縦幅100vhにし、ボックスの塗りを透明（RGBA値: 0, 0, 0, 0）にします。

ボックスの中にさらにボックスを配置します。縦幅と横幅はそれぞれ100%にし、色を黒に変更します。

サイトへアクセスした際に表示するデザインを、先ほど追加した黒のボックス内に追加します。

※今回はテキストが左から表示されるアニメーションを設定したボックスを追加しています

黒色のボックスの不透明度を0に変更します。

黒色のボックスを選択した状態で、エディタ右上の条件付きスタイルから「出現時」をクリックします。不透明度を1に変更し、時間を1200、遅延を1200に設定します。

この時点で、ライブプレビューを確認すると下のGIFのような状態になります。

親ボックスを選択して、配置を固定に変更し、重ね順を-3にします。

※重ね順を-3にすると、アニメーション後に他の要素より重ね順が下になるので、他の要素にホバーしたりクリックしたりする際の邪魔になりません

親ボックスを選択したまま、エディタ右上の「条件付きスタイル」から「出現時」を選択します。時間は0、重ね順を5、そして遅延を3200に設定します。

※「遅延」とは、アニメーションの開始をトリガーからどれだけ遅らせるか設定できるものです。今回の設定内容では、ボックスが画面に表示されると、条件付きスタイルの状態で3.2秒間表示され、その後、通常の状態に変化します

エディタの右上にある「プレビュー」ボタンをクリックして、ライブプレビューを見ながら、設定を微調整などして完成です。

スプラッシュスクリーン

スプラッシュ

スプラッシュスクリーン

ローディングページ