Adobe XDをもっと使いこなすヒント! 第19回 自動アニメーションの基本技

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、自動アニメーション機能を使った表現の実現手段に関連する9つのツイートを取り上げます。

Tip 1. 自動アニメーションを設定する

自動アニメーションは、アートボード間の遷移に、アニメーションを自動的に適用してくれる便利機能です。上のビデオで紹介されているのは、その一番単純な使い方の一例です。

基本的な使い方は次の通りです。

  1. アートボードを複製して
  2. オブジェクトの形状、位置、大きさなどを変更し
  3. プロトタイプモードに切り替えて
  4. 2つのアートボードをワイヤーでつなぎ
  5. アクションに「自動アニメーション」を選択します。

あとはプロトタイプの遷移トリガーが発生すれば、XDが勝手にアニメーションを追加してくれます。

Tip 2. 移動距離を変えて、タイミングと速度に変化をつける

アートボード間で複数のオブジェクトの属性を変更した場合、変更されたすべてのオブジェクトに自動アニメーションが適用されます。その際、それぞれのアニメーションは独立した動きになりますが、アニメーションの開始と終了のタイミングは同じです。

ということは、移動距離が長いオブジェクトほど高速で移動することになります。また、アートボード外に配置されたオブジェクトはアートボードに到達するまで表示されません。つまり、配置する位置を変えることで、オブジェクトが登場するタイミングと移動速度に差をつけられるわけです。上のビデオでは、マーカーの位置を変更して、アニメーションに変化をつけている様子が確認できます。

Tip 3. イージングを使って動きに変化をつける

「自動アニメーション」を指定したら、イージングを選択して動きに変化をつけられます。標準的な「イーズイン」「イーズアウト」「イーズイン/アウト」に加え、「スナップ」「ワインドアップ」「バウンス」が利用できます。上のビデオはスナップを使い、目的の場所に吸着する動きを演出しています。もちろん「なし」も指定可能です。

Tip 4. タイマートランジションを使ってアニメーションをループさせる

自動アニメーションとタイマートランジションを組み合わせると、ループするアニメーションを実現できます。上のビデオのように、アートボードを互いにワイヤーでつなぎ、それぞれのトリガーに「時間」を指定すると、一定時間ごとに2つのアートボード間を行ったり来たりするようになります。

その際に、アクションに「自動アニメーション」が指定されていると、遷移のタイミングでアニメーションが再生されるというわけです。上のビデオの例では、2つのアートボード間で円の位置が異なるため、円が行ったり来たりするアニメーションが見られます。

次は少し複雑な例です。上のビデオでは、オブジェクトが円周軌道を回るアニメーションを作成しています。

手順は次の通りです。まず、棒の先端に円を置いたグループをつくり、棒を透明化して円だけが見える状態にします。これは、棒の中心を軸に回転させるためです。この状態でアートボードを複製します。
次に、複製先のグループの角度を360°に設定します。つまりぐるりと一回転して元の位置に戻った状態という設定です。ですから、自動アニメーションを設定すれば、オブジェクトが360°回転するアニメーションが再生されます。

そして、このアニメーションを自動ループさせるため、複製先から複製元にタイマートランジションを設定します。この例では、戻るときのアクションは不要なので「なし」が選択されています。

同じように回転するアニメーションの例をもうひとつ。今度は、円周が回転するアニメーションです。回転させる手段はひとつ前の例と同じです。回転する図形の作成にブーリアングループが使われて、目を引く表現が実現されています。

Tip 5. パスを編集してグラフに動きを付ける

自動アニメーションはパスに対しても有効です。上のビデオではそれを利用してグラフをアニメーションさせています。これまでのTipsの手順と異なり、アートボードではなくオブジェクトをコピーしていますが、レイヤー名と階層関係が変わらなければこのやり方でも大丈夫です。

ちなみに、パスをカーブさせるには、ポイントをダブルクリックします。もしくは、Cmd+8 (Mac) か Ctrl+8 (Win) ショートカットキーも使えます。

Tip 6. ドラッグと組み合わせてカルーセルをつくる

次は、ドラッグをトリガーとして、自動アニメーションを利用する例です。上のビデオではカルーセルが実現されています。

トリガーに「ドラッグ」を指定する点を除けば、基本的な作業はこれまでのTipsと同様です。アートボードを複製したら、オブジェクトの大きさと位置を変更して、アニメーション前後の状態をつくります。

Tip 7. テキストをマスクしてカウンターを回す

最後の例です。カウンターが回転して数字が変わったように見えるアニメーションです。上のビデオでは、テキスト要素をシェイプでマスクすることでこれを実現しています。

用意するのは10個の数字が縦方向に並んだテキスト要素4つ(もしくは必要な桁数分だけ)と一行分マスクできる大きさのシェイプです。
テキスト要素を初期位置に並べたら、その上にシェイプを配置して、コンテキストメニューから「シェイプでマスク」を実行します。これでカウンターの見た目ができます。

あとはカウンターを別のアートボードにコピーして、数字の位置を調整し、自動アニメーションの設定をすれば完成です。


いかがでしたか?
これは便利そうだ!という使い方はあったでしょうか?

次回をお楽しみに!

POSTED ON 2018.12.5

Products Featured

  • Adobe XD

Tags

タグはありません