前回は自動アニメーションをマスキングとリピートグリッドを使って

カウンドダウンタイマーを作りました！

今回は透明化を使用した方法でこのような感じに作ってみようと思います。

前回のものと少し動きが違うのにお気づきでしょうか？

最後に比較するのでチェックしてみてください。

今回は前回の途中からです。特に難しいことはここまでしてないので心配は要りません。

このように円とテキストだけのレイヤーから始めます。

もしここまでのやり方が分からなければ、マスキング編を参考にしてみてください！

作り方

３，２，１，GO!と縦に並べていきます。

ここでのフォントのサイズは145です。円に入る大きさであれば大丈夫です。

文字を Command⌘/Ctrl+G でグループ化します。３が円の中央に来るように設置します。

アートボードの文字をを選択して Option/Alt を押しながらドラッグして複製します。

透明化＆フォントのサイズ変更

３以外の文字のサイズを１００にして小さくします。そして、不透明度を０％にします。

次のアートボードは２を中央に配置し、２以外を同じように小さくして不透明度０％にします。

イメージはこんな感じです。

グレーの文字が不透明度０％で、青のテキストが円内の大きな文字になります。

後は左上のプロトタイプにいき、

前回と同じようにアートボードの文字を選択して、青タグを隣につなげます。

時間　１秒　自動アニメーション　イーズアウト　0.3秒

これで完成です！ぜひ僕のと比べてみてください。

右上の再生ボタンを押して確認してみましょう！

前回とは少し違ったアニメーションになりましたよね？

今回はこのような透明化とサイズの変化を組み合わせた方法をご紹介しました。

では前回のものと比べてみましょう！

わずかに動きが違いますよね。どちらの動きが好みでしょうか？？

これからもAdobe XDのチュートリアルをご紹介していきたいと思います。

ではまた！

Adobe XDおすすめの本

このサイトで僕はAdobe XDを学びました。おすすめです。