このレッスンでは、Adobe XDで作成したイラストをアニメーションさせる方法を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
イラストをアニメーションさせるための準備
アートボード上のイラストを編集します。円の中のイラストを選択して、見た目が破線にならないように注意しつつ「線分」に数値を指定します。小さすぎると破線の間の隙間が見えてしまいます。今回は 500 を指定します。「間隔」は「線分」と同じ数値にします。
円は最初から破線になっているためそのままにします。また、縁の切れ目に配置されているフラッグアイコンも、線のアニメーションではなく最後にフェードインさせるためそのままにします。
アニメーションの中間状態を作成
フラッグアイコンが表示されていない状態を作成します。
イラストを編集済みのアートボードを複製して、隣に配置します。複製したアートボード上のフラッグアイコンを選択し、不透明度を0にして非表示にします。
アニメーションの初期状態を作成
最後に、イラストの破線の始点だけが表示された状態を作成します。これがアニメーションの初期状態です。
フラッグアイコンが表示されていない アートボードを複製します。円と円の中のイラストを選択し、「線分」に 0 を指定します。するとどちらも始点だけの状態になります。
自動アニメーションの設定
ワークスペース上部のタブをクリックしてプロトタイプモードに切り替えます。
始点だけが表示されたアートボードを選択し、青い矢印をフラッグアイコンが表示されていないアートボードにつなげます。プロパティインスペクター内のトリガーに「時間」を、ディレイに「0秒」を指定します。アクションの種類に「自動アニメーション」、イージングに「イーズアウト」、デュレーションには「2秒」を設定します。
続いて、 フラッグアイコンが表示されていない アートボードを選択し、青い矢印を最初にイラストを編集したアートボードにつなげます。プロパティインスペクター内のトリガーに「時間」を、ディレイに「0秒」を指定します。アクションの種類に「自動アニメーション」、イージングに「スナップ」、デュレーションには「0.8秒」を設定します。
これで一通りのインタラクションの設定ができました
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開くと、設定したアニメーションを確認できます。
イラストにグラデーションを追加
デザインモードに戻り、フラッグアイコンの数字と線の色を、白からグラデーションに変更します。
まず、数字のテキストを選択し、ツールバーの「オブジェクト」から「パスに変換」を選択して、テキストをパスに変換します。次に、フラッグの形の線を選択し、ツールバーの「オブジェクト」から「パスのアウトライン」を選択して線をアウトライン化します。
パスに変換した数字とアウトライン化した線を選択し、プロパティインスペクター内の塗りから「線形グラデーション」を選んでグラデーションを指定します。
プロトタイプモードに移動し、アクションの種類を「自動アニメーション」から「トランジション」に変更します。「デスクトッププレビュー」 ボタンをクリックして、プレビューウィンドウを開くと、修正したアニメーションを確認できます。