Adobe XDで数字をアニメーション化する

Adobe XDで数字をアニメーション化するマニュアルです。

数字を入力する

テキストツールを使って数を入力します。

数字を3回コピペする

数字を3回コピペします。

数字を追加する

１番目コラムで０から９まで数字を入力します。
２番目コラムで２回０から９まで数字を入力します。
３番目コラムで３回０から９まで数字を入力します。

長方形を作る

長方形ツールを使って長方形を作ります。

長方形を数字の１番目行の上に移動します。

シェイプでマスクを作る

長方形と全数字をセレクトして、右クリックして「シェイプでマスク」をクリックします。

アートボードをコピペする

アートボードをコピペして、下の画像道りに数字を上に動きます。

プロトタイプタブでインタラクションを追加する

プロトタイプタブでインタラクションを追加します。

アートボード１：
• トリガー：時間
• ディレイ：１秒
• アクション：自動アニメーション
• 移動先：アートボード２
• イージング：イーズイン
• デュレーション：２秒

アートボード２：
• トリガー：時間
• ディレイ：１秒
• アクション：自動アニメーション
• 移動先：アートボード２
• イージング：イーズアウト
• デュレーション：２秒