背景が透けて見えるテキストアニメーションをAdobe XDで作る方法を解説します。
画像素材や完成形のXDファイルはこちらからダウンロードできます。
note.com/matsu_eri/n/n9134d27...
▼チャプター
00:00 背景が透けて見えるテキストアニメーションの作り方 OP
00:08 新規プロジェクトを作成する
00:19 テキストツールで文字を入力する
00:46 アートボード名を変更する
00:59 画像を配置する
02:14 テキストをアウトライン化（パスに変換）する
02:50 「シェイプでマスク」
03:24 アートボードの色を変更する
03:44 アートボードを複製する
04:24 プロトタイプモードに切り替える
04:45 インタラクションを設定する
05:38 デスクトッププレビューでアニメーションを確認する
06:04 デザインモードに切り替える
06:20 「マスクをグループ化解除」
07:48 プロトタイプモードに切り替える
08:29 一瞬でアートボードを切り替える（デュレーション0秒）
08:50 最後のアートボードから最初のアートボードに遷移させる
09:00 無限ループアニメーションの完成
▼関連記事
・このアニメーションをCSSで実装する方法
「すぐ使えるXD Tips vol.5 - テキストアニメーションをコーディング編」鹿野壮さん
note.com/tonkotsuboy_com/n/n9...