【adobe XD】破線の自動アニメーション
お疲れ様です、どうもアオキタカユキです。
今回は1月のアップデートでリリースされた「破線の自動アニメーション」をご紹介いたします！機能名だけ聞くとよくわかりませんが、要はロゴやフォントに沿って「線」を引くアニメーションが簡単に作成できます。ローディング画面や企業サイトでオープニングの画面でロゴをこの表現で表示していることが多いですよね。かなりリッチな表現なんで場合によっては簡単にサイトのレベルを引き上げてくれます。
新機能「破線の自動アニメーション」を利用してリッチなアニメーションを作成してみましょう！
まずはこのようなロゴをご用意。
今回は弊社サービスのCarelyのロゴ使わせていただきます。
そしてロゴに線を設定します。
破線を以下の設定に、
「間隔」に大きい数字をいれてください（具体的にいくつと入力する必要はなく、線が消える数字をいれればOKです）。
アートボードをコピーして、
「線分」に数値を入力。ここは線がつながるまでいれてください。
そしてプロトタイプのタブに移動して、各アートボードを以下の設定でつなげてください。
アクションの種類を「自動アニメーション」。以下の項目はお好みで。
イージング：アニメーション速度の緩急種別
デュレーション：アニメーションが完了するまでの時間
そしてできたのはこんな感じのアニメーションです！
XDはUIに特化したツールなのでこういう機能も用意してくれてます！効率的にUIを作成してリッチにアウトプットしていきましょう！
