Adobe XDをもっと使いこなすヒント! 第55回 自動アニメーションの基本仕様を押さえる

Creative Cloud UI/UX & Web

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、自動アニメーションの基本仕様を紹介する9つのツイートを紹介します。

Tip 1. 自動アニメーションを利用できる場所

アートボード間の遷移には、トランジションに「自動アニメーション」を指定できます。両方のアートボードに、種類、レイヤー名、階層が一致するオブジェクトがあると、それが自動アニメーションの対象になって、遷移の際にオブジェクト間の異なる属性が自動的にアニメーション化されます。

自動アニメーションは、コンポーネントのステート間の遷移にも指定できます。インタラクティブなコンポーネントの作成に使用すると効果的です。

Tip 2. アニメーションの移動速度

すべてのアニメーションは同時に始まり同時に終了します。すなわち、個々のオブジェクトの属性が最初の状態から最後の状態に変化するのにかかる時間は同じです。そのため、変化の幅が大きいほど、変化する速度は速くなります。位置の移動であれば、遠くに移動するオブジェクトほど早く移動することになります。

Tip 3. アートボード外から登場するアニメーション

アートボード間の遷移に自動アニメーションを指定した後、遷移前のアートボード上のオブジェクトをアートボード外に移動すると、画面外から登場するアニメーションを実現できます。

複数のオブジェクトをアートボード外から登場させる場合、アートボードから遠いオブジェクトほど画面に現れるタイミングが遅くなります。これを利用すると、アニメーション開始のタイミングが異なるような効果をつくり出せます。

プロトタイプモードでアートボードの外に移動したオブジェクトにアクセスするには、レイヤーパネルを使用するのが便利です。レイヤーパネルからアートボードを選択すると、そのアートボードに関連付けられているオブジェクトをカンバス上で確認できます。

Tip 4. 自動アニメーションのトリガーの種類

自動アニメーションのトリガーは、タップ(クリック)以外にもいくつか用意されています。トリガーに「時間」を指定した場合は、設定された時間が経過すると自動的にアニメーションが始まります。この機能はタイマートランジションと呼ばれています。

トリガーに「ドラッグ」を指定すると、ドラッグ操作に合わせて2つのアートボード間のアニメーションが再生されます。

「音声」もトリガーに指定できます。プレビューウインドウを表示して、スペースキーを押しながら、コマンドに指定したテキストを口にすると、アニメーションが開始されます。


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

次回をお楽しみに!

POSTED ON 2020.09.24