このレッスンでは、Illustrator で作成した手書き風のロゴをアニメーションさせる方法を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
Illustratorで作成したロゴを配置
サンプルファイルを開くと、XDのアートボード上に、illustratorで作成したロゴが配置されています。”ADOBE XD” の文字はアウトライン化されていますが、”Trail” の文字は、線を使ったアニメーションを作成できるように線のままです。
”Trail” の文字を選択し、「線分」に数値を入力します。小さい数値を入れると破線の間の隙間が見えてしまうため、 ”Trail” の文字が一本の線で描かれているように見えるまで数値を大きくします。今回の動画では300を指定しています。「間隔」にも「線分」と同じ数値を入力します。
アニメーションの初期状態を作成
次は、アニメーションの初期状態を作成します。初期状態では “ADOBE XD” の文字 だけが表示されるようにします。
ロゴを配置したアートボードを複製します。今回は4枚のアートボードを使用するため、間に2枚のアートボードを配置できるように、複製したアートボードを配置します。
複製したアートボードの ”Trail” の文字を選び、 不透明度を0にして非表示にします。”i” の文字の点も忘れずに不透明度を0にしておきます。
アニメーションの中間状態を作成
続けて、”Trail” の文字の始点だけが表示された状態を作成します。
”Trail” の文字を非表示にしたアートボードを複製します。”Trail” の文字の不透明度を100にして表示してから、「線分」に 0 を指定します。すると、”Trail” の始点のみが表示された状態を作成できます。
次は、”Trail” の線がすべて表示された状態を作成します。始点のみが表示されたアートボードを複製し、「Trail」の「線分」を300にすると、線全体が表示されます。文字 “i” の点だけが欠けている状態です。
アニメーションが自動的に始まるように設定
ワークスペース上部のタブをクリックしてプロトタイプモードに移動します。
初期状態のアートボードを選択し、表示された青い矢印を、”Trail” の始点のみが表示されたアートボードにつなげます。プロパティインスペクター内のトリガーに「時間」を、ディレイに「0.6秒」を指定します。アクションの種類は「トランジション」、アニメーションは「なし」を設定します。
アニメーションが最後のアートボードまで進行するように設定
”Trail” の始点のみが表示され アートボードを選択し、青い矢印を ”Trail” の文字の線がすべて表示されたアートボードにつなげます。プロパティインスペクター内のトリガーに「時間」を、ディレイに「0秒」を指定します。アクションの種類は「自動アニメーション」に、イージングは「イーズアウト」に、デュレーションは「2秒」に設定します。
最後に、”Trail” の文字の線がすべて表示された アートボードを選択し、青い矢印を最初にロゴを配置したアートボードにつなげます。プロパティインスペクター内のトリガーに「時間」を、ディレイに「0秒」を設定します。アクションの種類は「自動アニメーション」に、イージングは「スナップ」に、デュレーションは「0.2秒」に設定します。
これで一通りのインタラクションの設定ができました。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開くと、設定したアニメーションを確認できます。