Adobe XDをもっと使いこなすヒント！ 第19回 自動アニメーションの基本技
Adobe XDをもっと使いこなすヒント！
この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、自動アニメーション機能を使った表現の実現手段に関連する9つのツイートを取り上げます。
Tip 1. 自動アニメーションを設定する
#adobexd #protip Duplicate your artboard, change the properties of an object, and wire the two artboards together using auto-animate for an incredibly easy morph. @adobexd pic.twitter.com/aCWghhUhuZ
— Elaine Chao (@elainecchao) October 18, 2018
自動アニメーションは、アートボード間の遷移に、アニメーションを自動的に適用してくれる便利機能です。上のビデオで紹介されているのは、その一番単純な使い方の一例です。
基本的な使い方は次の通りです。
- アートボードを複製して
- オブジェクトの形状、位置、大きさなどを変更し
- プロトタイプモードに切り替えて
- 2つのアートボードをワイヤーでつなぎ
- アクションに「自動アニメーション」を選択します。
あとはプロトタイプの遷移トリガーが発生すれば、XDが勝手にアニメーションを追加してくれます。
Tip 2. 移動距離を変えて、タイミングと速度に変化をつける
#adobexd #protip Adjust your object’s start position – even if they’re off the artboard – to create a cascading effect for your auto-animated objects. @adobexd pic.twitter.com/Gy5q97a9N9
— Elaine Chao (@elainecchao) October 22, 2018
アートボード間で複数のオブジェクトの属性を変更した場合、変更されたすべてのオブジェクトに自動アニメーションが適用されます。その際、それぞれのアニメーションは独立した動きになりますが、アニメーションの開始と終了のタイミングは同じです。
ということは、移動距離が長いオブジェクトほど高速で移動することになります。また、アートボード外に配置されたオブジェクトはアートボードに到達するまで表示されません。つまり、配置する位置を変えることで、オブジェクトが登場するタイミングと移動速度に差をつけられるわけです。上のビデオでは、マーカーの位置を変更して、アニメーションに変化をつけている様子が確認できます。
Tip 3. イージングを使って動きに変化をつける
More Auto-Animate examples I built with @AdobeXD 🧙🏻♂️ This leverages time triggers ⏲️ to loop between screens. Plus “snap” easing by @vlh
With Auto-Animate I’m animating the boolean group to adjust the overlay mask! Notice the arrowhead changing – Path animation FTW! 🔥 #AdobeXD pic.twitter.com/4fIHJZwtIo
— Jonathan Pimento (@jonathanpimento) October 25, 2018
「自動アニメーション」を指定したら、イージングを選択して動きに変化をつけられます。標準的な「イーズイン」「イーズアウト」「イーズイン/アウト」に加え、「スナップ」「ワインドアップ」「バウンス」が利用できます。上のビデオはスナップを使い、目的の場所に吸着する動きを演出しています。もちろん「なし」も指定可能です。
Tip 4. タイマートランジションを使ってアニメーションをループさせる
#adobexd #protip Use timed transitions and auto animate to set up a ping pong wait animation. @adobexd pic.twitter.com/6XsSBm0XpP
— Elaine Chao (@elainecchao) October 20, 2018
自動アニメーションとタイマートランジションを組み合わせると、ループするアニメーションを実現できます。上のビデオのように、アートボードを互いにワイヤーでつなぎ、それぞれのトリガーに「時間」を指定すると、一定時間ごとに2つのアートボード間を行ったり来たりするようになります。
その際に、アクションに「自動アニメーション」が指定されていると、遷移のタイミングでアニメーションが再生されるというわけです。上のビデオの例では、2つのアートボード間で円の位置が異なるため、円が行ったり来たりするアニメーションが見られます。
#adobexd #protip Create easy spinners in two artboards by relying on transparent objects to hold the center. @adobexd pic.twitter.com/Wjs9LCp76E
— Elaine Chao (@elainecchao) October 23, 2018
次は少し複雑な例です。上のビデオでは、オブジェクトが円周軌道を回るアニメーションを作成しています。
手順は次の通りです。まず、棒の先端に円を置いたグループをつくり、棒を透明化して円だけが見える状態にします。これは、棒の中心を軸に回転させるためです。この状態でアートボードを複製します。
次に、複製先のグループの角度を360°に設定します。つまりぐるりと一回転して元の位置に戻った状態という設定です。ですから、自動アニメーションを設定すれば、オブジェクトが360°回転するアニメーションが再生されます。
そして、このアニメーションを自動ループさせるため、複製先から複製元にタイマートランジションを設定します。この例では、戻るときのアクションは不要なので「なし」が選択されています。
#adobexd #protip Again, leverage the rotation feature for quick animations that pack a punch. Here’s a quick Boolean object spinner, which spins around the object’s center in a 2 artboard animation. @adobexd pic.twitter.com/Q9z1YMSqFv
— Elaine Chao (@elainecchao) October 24, 2018
同じように回転するアニメーションの例をもうひとつ。今度は、円周が回転するアニメーションです。回転させる手段はひとつ前の例と同じです。回転する図形の作成にブーリアングループが使われて、目を引く表現が実現されています。
Tip 5. パスを編集してグラフに動きを付ける
#adobexd #protip Graphs look especially amazing using auto-animate – just copy and paste your path to your second artboard to make sure the two elements have the same name, and then set auto-animate between them. @adobexd pic.twitter.com/e48mI1JQw5
— Elaine Chao (@elainecchao) October 26, 2018
自動アニメーションはパスに対しても有効です。上のビデオではそれを利用してグラフをアニメーションさせています。これまでのTipsの手順と異なり、アートボードではなくオブジェクトをコピーしていますが、レイヤー名と階層関係が変わらなければこのやり方でも大丈夫です。
ちなみに、パスをカーブさせるには、ポイントをダブルクリックします。もしくは、Cmd+8 (Mac) か Ctrl+8 (Win) ショートカットキーも使えます。
Tip 6. ドラッグと組み合わせてカルーセルをつくる
#adobexd #protip Combine auto-animate with the new drag trigger type to create a neat zoom/move effect – great for carousels! @adobexd pic.twitter.com/QEMxzCYb4f
— Elaine Chao (@elainecchao) October 25, 2018
次は、ドラッグをトリガーとして、自動アニメーションを利用する例です。上のビデオではカルーセルが実現されています。
トリガーに「ドラッグ」を指定する点を除けば、基本的な作業はこれまでのTipsと同様です。アートボードを複製したら、オブジェクトの大きさと位置を変更して、アニメーション前後の状態をつくります。
Tip 7. テキストをマスクしてカウンターを回す
#adobexd #protip Dissecting @pinsky’s example from yesterday, use a mask group and move the elements within to make a numeric spinner. @adobexd pic.twitter.com/dHeQV9gKe3
— Elaine Chao (@elainecchao) October 29, 2018
最後の例です。カウンターが回転して数字が変わったように見えるアニメーションです。上のビデオでは、テキスト要素をシェイプでマスクすることでこれを実現しています。
用意するのは10個の数字が縦方向に並んだテキスト要素4つ（もしくは必要な桁数分だけ）と一行分マスクできる大きさのシェイプです。
テキスト要素を初期位置に並べたら、その上にシェイプを配置して、コンテキストメニューから「シェイプでマスク」を実行します。これでカウンターの見た目ができます。
あとはカウンターを別のアートボードにコピーして、数字の位置を調整し、自動アニメーションの設定をすれば完成です。
いかがでしたか？
これは便利そうだ！という使い方はあったでしょうか？
次回をお楽しみに！