ITツール

【XD】自動アニメーションを使いこなすために知っておくべきルール

xd-auto-animation-rule

XDの「自動アニメーション」はとてもおもしろい。アートボードの Before と After をつなげるだけで、いい感じのアニメーションを自動的につくってくれる。

なんとなくの感覚でつくっても、それなりのアニメーションにはなるのが素晴らしい。

ただ、もし自分の意図した通りのアニメーションを狙って、上手につくるためには、自動アニメーションの基本とルールを知っておく必要がある。

今日はそんな、自動アニメーションの基本ルールをお話ししつつ、具体的なアニメの作例をご紹介しよう。

自動アニメーションをつくる方法

まずはじめに、XDでアニメーションをつくる手順について。それはおおよそ以下の流れになる。

  1. アートボードをふたつ用意して、
  2. 状態の前と後をそれぞれつくり、
  3. それらをプロトタイプでつなげる。

これだけでOK。こうすることで、状態の変化をXDが自動的に読み取って、いい具合にアニメーションを作ってくれる。
ただ、この「状態の変化」を認識するためには、いくつかの守るべきルールがある。これを理解しておくと、アニメーションを上手につくれるようになるのだ

厳密には「ステート機能」をつかってアニメーションをつくることもできますが、今回はアートボードをつかった方法に限定してご紹介する。

自動アニメーションをつくるためのルール

アートーボードに配置したオブジェクトに、アニメーションがくわわるときのルールがある。それが以下の通りだ。

  • 移動先のアートボードにオブジェクトが存在しない場合、オブジェクトがフェードインします。
  • 移動元のアートボードにオブジェクトが存在しない場合、オブジェクトがフェードアウトします。
  • オブジェクトのレイヤー名とグループの両方が一致している場合、属性がアニメーション化されます。

移動先(移動元)に存在しないときにフェードイン/アウトするというのは、たとえば以下のようなイメージだ。

「□」と「△」はそれぞれ、別のオブジェクトとしてアートボードに設置されているので、フェードイン/アウトのアニメーションとなっている。

xd-auto-animation-rule_1

しかしこれらのオブジェクトのレイヤー名を一緒にしてあげると、「□」から「△」へ変化するアニメーションになる。

xd-auto-animation-rule_2

アニメーションのルールは以上。とにかく「変化させたいオブジェクトは、グループ名とレイヤー名を一致させる」ということだけ覚えておけば良い。

これらを利用すると、以下のようなアニメーションも簡単に作れるようになる。

自動アニメーションの作品例

Webサイトなどでよくみる、ハンバーガーメニューのアニメーション。上と下の棒が組み変わって「×」になり、真ん中の棒はフェードアウトするようになっている。

xd-auto-animation-rule_3

オブジェクトを回転させることもできる。オブジェクトのX値・Y値は変更せず、回転する角度を「360度」に設定すると、このように一回転させられる。

xd-auto-animation-rule_4

グループになっているオブジェクトの、一部だけを変更することも可能。その場合は、グループ名も同一にすることをお忘れなく。

xd-auto-animation-rule_5

自動アニメーションが開始されるキッカケ(トリガー)を「時間」に設定すると、ループするようなアニメーションをつくることも可能だ。

xd-auto-animation-rule_6

関連キーワードからさらに見る

\ この情報をシェアしよう! /

  • この記事を書いた人

ばんか

Webディレクターとしてサラリーマンをやりつつ、個人でブログや執筆活動をするパラレルキャリアを実施中。 ITツールを日常で活かす方法を広く伝え歩くことをミッションとした「ITツールエバンジェリスト」です。AllAboutやYahooクリエイターズプログラムでも活動中。

-ITツール
-, ,