このレッスンでは、半円のローディングアイコンをアニメーションさせる方法を解説します。
Adobe XD を起動し、「ファイル」→「開く」からダウンロードしたサンプルファイルを選択して「開く」をクリックします。ファイルが開くと、動画と同じサンプル画面が表示されます。
ローディングアイコンの見た目を作成
まず背景用の円を作成します。直径80pxの円を描き、プロパティインスペクター内の塗りのチェックボックスをオフにして線だけにします。線のサイズに6を、色にはカラーパレットに登録されているグレーを指定します。
次に回転する半円を作成します。作成した背景用の円を複製し、線の色をカラーパレットに登録されている水色に変更します。線分のフィールドに円周の長さの半分 (80 × 3.14 × 0.5) を入力すると半円になります。
アイコンが360度回転した状態を作成
ローディングアイコンを作成したアートボードを複製します。macOS の場合は opt キー、Windows の場合は Alt キーを押しながらアートボードをドラッグすると簡単に複製できます。
複製したアートボードの水色の半円を選択し、プロパティインスペクター内の角度のフィールドに360を指定します。これで半円が360度回転して元の位置に戻った状態ができます。
アイコンが回転するアニメーションを設定
アニメーションを設定するには、ワークスペース上部のタブをクリックしてプロトタイプモードに切り替えます。
最初にローディングアイコンを作成したアートボードを選択し、アートボード右側に表示される青い矢印をもうひとつのアートボードにドラッグして接続します。プロパティインスペクターのトリガーに「時間」を、ディレイに「0秒」を指定すると、アートボードの表示後すぐに自動的にインタラクションが開始されます。
アクションの種類には「自動アニメーション」、イージングには、「なし」、デュレーションには「1秒」を設定します。これにより、水色の半円が1秒かけて360度回転するアニメーションが再生されます。念のため、移動先は2枚目のアートボードが選択されていることを確認しておきましょう。
アニメーションのループ再生を設定
アニメーションが繰り返し再生されるように、2枚目のアートボードから1枚目のアートボードに戻る動きを追加します。
2枚目のアートボードを選択し、青い矢印を1枚目のアートボードへつなげます。プロパティインスペクタにあるトリガーを「時間」にし、ディレイは「0秒」にします。
今回は、アクションの種類に「トランジション」、アニメーションに「なし」を指定します。これで、2枚目のアートボードが表示されると即座に1枚目のアートボードが表示されるため、1枚目のアートボードに指定したアニメーションが繰り返し再生されるようになります。
ワークスペース右上の「デスクトッププレビュー」ボタンをクリックして、プレビューウィンドウを開くと、設定したアニメーションを確認できます。