AdobeXDの自動アニメーションとドラッグトランジションの作成方法

 

 

概要

ユーザーインタフェースなどの作成に力を発揮するAdobeXDですが、10月のアップデートで新たに自動アニメーションなどのトランジションが新しく追加されました。
工夫次第でUIのプロトタイプがより魅力的、かつ説得力あるわかりやすいものになりそうです。

 

自動アニメーション

 

アップデートされたものの概要などは、上記の記事をみたりAdobe公式を参照ください。
ここでは、実際に自動アニメーション機能を利用したプロトタイプ作成の手順を簡単にみていきたいと思います。

 

どのようなことが可能なのか

 

 

暗号通貨ウォレットのRaccoonを題材に、オンボーディングのロゴアニメーションを簡単に作ってみました。(クリックで再生)
私はAfeteEffects(AE)のスキルは無いに等しいのですが、XDの自動アニメーションは直感的にアニメーションを作れました。

Sponsored Link


AEではタイムラインとレイヤーの概念があり、それらを組み合わせて複雑なアニメーションを作成することができますが、
XDの場合、アニメーション作成の手順は、アニメーションの起点→[終点起点]→[終点起点]終点、といったようなアートボードを作成し、それらのアートボード上に同じオブジェクト名が存在している場合、アートボード間で移動・回転・縮小された変更点が自動的に補完され、アニメーションするような構造になっています。

公式の言葉を借りると

アートボードを複製し、サイズ、位置、回転などのオブジェクトプロパティを変更し、自動アニメーションアクションを適用して、アートボード間のアニメーションによるトランジションを作成するだけです。
自動アニメーションを使用するには、アニメーション化するオブジェクトのレイヤー名が、各アートボード間で同じであることを確認します。
https://helpx.adobe.com/jp/xd/help/create-prototypes-using-auto-animate.html

なのですが、いかんせん公式ヘルプはわかりにくいので図解したいと思います。

 

自動アニメーションの実践

 

サンプル

 

完成サンプルです。

 

この場合のアートボードは2つで、左が起点、右が終点として働きます。

 

このとき、移動させるオブジェクトのオブジェクト名をアートボード間で共通させておく必要があります。
この場合アニメーションさせるのは白い円なので、2つのアートボード上の白い円を「circle」と共通の名前を定義しました。

それからプロトタイプモードに移行したあと、アートボード名「アートボード1」をクリックして、アートボード全体を選択してから、「アートボード2」へワイヤーをつなぎます。

「トリガー」には、

  1. タップ
  2. ドラッグ
  3. 時間
  4. Voice

があります。
2のドラッグに関しては、応用として下記に記載します。
今回は時間を指定して、「0.5秒後にトランジションが開始する」ようにしました。

「アクション」の項目では、普段のディゾルブやスライドなどの「トランジション」ではなく「自動アニメーション」を選択します。

 

「イージング」は、アニメーションの緩急の指定です。
多用するのはイーズアウト、イーズイン、イーズインアウト、の3つかと思いますが、バウンスを選択するとサンプルのような跳ねるような動きに変わります。

「デュレーション」は、アニメーションが起点から終点まで完了するまでの時間です。

 

これらの設定をおこなったあと、プレビューしてみると、アートボード1からアートボード2の位置まで白い円が移動するアニメーションが作成できていると思います。

Sponsored Link


 

アートボード範囲外のオブジェクトを自動アニメーションアートボードに含める方法

 

XDの自動アニメーションで分かりづらいのが、自動アニメーション開始時点でアニメーションするオブジェクト「起点アートボード範囲外 / 終点アートボード範囲外」にいる場合です。

 

ピピ美(『ポプテピピック』の長いほう)を横切らせたい

 

作例が変なもので申し訳ないですが(大川ぶくぶさんすいません)、ピピ美(『ポプテピピック』の長いほう)をアートボードを縦に通り過ぎるオブジェクトとして動かしたい場合、オブジェクトの起点はアートボードの範囲外において置かなければなりません。

ただ、アートボード外の置いてあるオブジェクトはXDだと基本的にはワークスペース(とかいう名前だった気がします)のオブジェクトとして認識されるため、そのまま範囲外にオブジェクトを置いてもアートボードとリンクができません。

 

 

この問題を解決するには…↑を見てもらえると一番早いですが、

  1. まずアニメーションオブジェクトに共通のオブジェクト名を定義します。
  2. 次にアニメーションオブジェクトをアートボード範囲内にちらっと入れておきます。
  3. 次に起点アートボードと終点アートボードをワイヤーでつなぎ「自動アニメーション」を設定します
  4. このとき、アートボード間に自動アニメーション属性が定義されたので、アートボード範囲外オブジェクトもアートボードと関連付けられるようになりました。
  5. アートボード範囲内にちらっと入れておいたアニメーションオブジェクトを、アートボード範囲外に移動させます。
  6. アニメーションさせたいオブジェクトが、アートボード範囲外に置かれながらアートボードに関連付けられた不可視なオブジェクトに切り替えられました。

 

番外編:カルーセルプロトタイプ(ドラッグトランジション)

 

 

サンプルです。

XDの自動アニメーションで分かりづらいのが、アートボード範囲外にありながらアートボード範囲内に入ってくるトランジションですが、一個前の見出しで解説したような手順を踏むとトランジションがうまく組めます。

 

ただしドラッグを移動できるカルーセルカードのようなものだと、アートボード範囲外オブジェクトにしなくても良い場合もあります。
サンプルのようなカルーセルのプロトタイプを作成したい場合、アートボード範囲外に2枚目のカードを用意しておき、不可視オブジェクトにしておくことも考えられますが、この場合、カルーセル全体をグループ化し、アートボード間で共通のオブジェクト名を定義しておいたほうが簡単です。

 

実践

 

 

アニメーションオブジェクトを作成します。

 

 

 

両方のカードをプロトタイプのワイヤーで接続します。

 

 

結果的にこのような形を作ります。

 

 

このとき「アクション」では自動アニメーションを選択しますが、
「トリガー」に「ドラッグ」を選択すると、カルーセルでの動作が再現できます。

以上のような設定をおこなうと、サンプルのような動作が可能になります。

 

 

おわり

 

イズミ リム

XDの自動アニメーションについて書きました。
おわり!

 

 

Sponsored Link

このブログはNEM猫プロジェクトを応援しています。