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

Adobe XDで数字をアニメーション化するマニュアルです。
数字を入力する
テキストツールを使って数を入力します。
数字を3回コピペする
数字を3回コピペします。
数字を追加する
1番目コラムで0から9まで数字を入力します。
2番目コラムで2回0から9まで数字を入力します。
3番目コラムで3回0から9まで数字を入力します。
長方形を作る
長方形ツールを使って長方形を作ります。
長方形を数字の1番目行の上に移動します。
シェイプでマスクを作る
長方形と全数字をセレクトして、右クリックして「シェイプでマスク」をクリックします。
アートボードをコピペする
アートボードをコピペして、下の画像道りに数字を上に動きます。
プロトタイプタブでインタラクションを追加する
プロトタイプタブでインタラクションを追加します。
- アートボード1:
- トリガー:時間
- ディレイ:1秒
- アクション:自動アニメーション
- 移動先:アートボード2
- イージング:イーズイン
- デュレーション:2秒
- アートボード2:
- トリガー:時間
- ディレイ:1秒
- アクション:自動アニメーション
- 移動先:アートボード2
- イージング:イーズアウト
- デュレーション:2秒
-
前の記事
ProgateのJava学習者に向けたEclipse入門<プログラム編> 2020.01.23
-
次の記事
Markdown書き方 2020.04.04