Adobe Stockのベクターアートワークをカスタマイズして、効果抜群のモバイルアプリ用読み込み画面のアニメーションを作成します。

読み込み画面のアニメーション化に使用するベクターアートワークを検索する

Adobe Stockで、カスタマイズしてユニークなアニメーションを作成可能なベクターアートワークを検索します。

Adobe Stockでベクターフィルターをオンにし、ネオン文字を検索した後の検索結果画面

IllustratorからXDに文字をコピー&ペーストする

IllustratorファイルからXDのレイアウトに選択した文字をコピー&ペーストし、各文字を再利用可能なコンポーネントに変換します。

Illustratorファイルの拡大画像、ベクター文字を選択してXDレイアウトにコピー&ペーストしている

2つ目のアートボードを作成し、文字を非表示にする

XDでアートボードを複製し、文字の1つをネオンが消えた状態のものに置き換えてから、アピアランスパネルの不透明度を下げます。

XDのゴシックフレームに、ネオン文字の表示を「オン」と「オフ」にした2枚のアートボードが表示されている

アートボード間にタイマーアニメーションを作成する

プロトタイプのワークスペースで、トリガーに時間を選択し、ディレイを設定します。アクションの種類は自動アニメーションでイージングはバウンスを選択して、最初のアートボードから2つ目のアートボードへのリンクを作成します。同じ手順で、デュレーションの異なるアートボードをさらにいくつか作成します。

XDのプロトタイプインターフェイス、2つのアートボード間のインタラクションパネルで時間イベントと自動アニメーションのバウンスエフェクトを設定している

アニメーションがメイン画面で終わるようにする

モバイルアプリの最後のアニメーション画面をメイン画面にリンクし、読み込み画面のアニメーションを完成します。

プロトタイプのアートボード、モバイルアプリのメイン画面にリゾルブする、完成した読み込み画面のアニメーションを表示している

完成

最先端のアニメーションで期待感をかき立てる読み込み画面が完成しました。

2つのモバイルアプリ画面の画像、左側はゴシック調のフレームに「ENTER」のネオン文字、右側はモバイルアプリのインターフェイス

 

Adobe Stockの厳選されたコレクションから、次回のプロジェクトに活用できる素材を見つけましょう。

 

02/10/2021
このページは役に立ちましたか。