ISSEN 
はじめに
この記事の概要
こんにちは、株式会社TOKOSの杉田です！
今回はAdobeXDでテキストアニメーションを実装する方法について紹介します
クライアント様にデザインの提案する際にアニメーションの提案にする際にどうしようかなと考えていた際に、2022年のAdobeMAXで株式会社ICS様が紹介されていましたので、とても参考になりましたので紹介します。
内容としてはAdobeAfterEffectsでテキストアニメーションを作成しJSON(Lottie)書き出しをしてXDに貼り付けるような流れになります。とても簡単でしたので是非参考にしていただければと思います。
またLottieについては下記を参照してください。
対象読者
- AdobeXDにテキストアニメーションを実装したい方
今回の完成予定
今回の完成予定はファーストビューでの使用想定のテキストアニメーションになります。
アニメーションの実装
まずは、オブジェクトを作成していきます。
XDかillustraterで表示させたいテキストを作成します。
今回はXDで行います。
次にオブジェクトをAfterEffectsに書き出していきます。
オブジェクトを選択した状態で「ファイル」から「書き出し」の中の「AfterEffects」を選択( option＋command＋f)
そしたらAfterEffectsに移動します。
今からはAfterEffectsの作業に入ります。
好きなようにアニメーションを施して書き出せば良いです。
ですが、今回はAfterEffectsのデフォルトのプリセットを使用したいと思います。
プリセットの選択はAdobeBridge経由で選択画面に入りますので、AdobeBridgeを入れていない方はダウンロードしてください
画面内のオブジェクトをドラッグして選択した状態で「アニメーション」の「アニメーションのプリセットを参照」を選択
そうするとAdobeBridge経由で選択画面に行けると思います。
そうしたら、フォルダの「Text」を選択
フォルダを開いて 、フォルダの「Animate In」を選択
この中から好きなアニメーションを選択できます。
今回は「フェードアップ(単語)」を選択します。
フェードインのアニメーションですが、スペースごとで区切りに遅延がかかり表示してくれます。
またAdobeBridgeの画面右でプレビューも見れるのでとても選びやすいかと思います。
選択するとオブジェクトにアニメーションがかかっているかと思います。
ここからイージングや他の動きをつけても良いと思います。
ここからJSONで書き出して行きたいと思います。
ここからJSON(Lottie)で書き出すのですが別途プラグイン(無料)が必要になります。下記からダウンロードしてください。
AfterEffectsプラグイン:Bodymovin
「ウィンドウ」から「エクステンション」から「Bodymovin」を選択
書き出すJSONデータの保存先の設定をします。
右の「･･･」を選択し保存先を選んで保存
保存先を選んだら選択した状態で「Render」を選択
下部ボタンが「Done」になったら完成です。
自動でアウトライン化して書き出してくれます。
この時エラーが出る場合は「環境設定」から「スクリプトとエクスリプリッション」を選択アプリケーションのスクリプト内の「スクリプトによるファイルへの書き込みとネットワークへのアクセスを許可」にチェックを入れると解消されるかと思います。
書き出しが出来たら、XDに貼り付けると写ってないように思いますが、プレビューを見るとアニメーションがかかっているかとおもいます。
さいごに
クライアント様にアニメーションの提案や、デザイナーとエンジニア間の認識の齟齬をなくすためにもデザイン段階からアニメーションの実装ができるのは良いのかなと思います。デフォルトでも多く選択できるのも良い点かなと思います。
