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

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

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

数字を入力する

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

数字を3回コピペする

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

数字を追加する

1番目コラムで0から9まで数字を入力します。
2番目コラムで2回0から9まで数字を入力します。
3番目コラムで3回0から9まで数字を入力します。
数字を追加する

長方形を作る

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

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

シェイプでマスクを作る

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

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

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

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

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

    アートボード1:

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

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

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