Adobe XDをもっと使いこなすヒント！第13回タイマートランジションとパネルの設定項目

Adobe XDをもっと使いこなすヒント！

この連載では、Adobe XDを便利に使うための様々なテクニックを、Adobe XDチームのツイートからピックアップしてご紹介します。今回は、トランジションに関連する使い方についての7つのツイートを取り上げます。

Tip 1. タイマートランジションを設定する

#adobexd #protip New in the September release: timed transitions! Switch from tap to time to automatically move to a different screen instead of having to rely on user interaction. @adobexd pic.twitter.com/1vk5Fn8ndJ

— Elaine Chao (@elainecchao) September 20, 2018

トリガーのプルダウンから「時間」を選択すると、設定した時間後に自動的にトランジションを開始させることができます。ユーザーの操作無しで次のアートボードに移動したいときに便利です。

下の例は、スタート画面を表示すると、自動的に機能紹介が開始されるというシナリオを、タイマートランジションの機能を使って実現しています。

#adobexd #protip Connect a timed transition to your homescreen to start your transitions immediately after you launch! Great for automated screen walkthroughs. @adobexd pic.twitter.com/SlDMgimQWw

— Elaine Chao (@elainecchao) September 21, 2018

なお、トリガーに「時間」を選択できるのはアートボードに対するトランジションに限定されます。そのため、アートボード全体を自動的に入れ替える以外の目的には使用できません。

例えば、下のTips 2のシナリオは、トリガーに「時間」を指定すると、実現できない例のひとつです。

Tip 2. 位置をキープしたままトランジション

#adobexd #protip The new preserve scroll position is great for in-place transitions for button states. @adobexd pic.twitter.com/WdZJtLzJYY

— Elaine Chao (@elainecchao) February 27, 2018

通常、トランジションで次の画面に移動すると、新しい画面が先頭から表示されます。しかし、画面の状態の変化（クリックすると背景が変わる等）を表すためにトランジションを使う場合は、トランジションの前後で、画面のスクロール位置がズレてしまっていたら話になりません。

そんなとき使えるのが「スクロール位置を保存」です。上のビデオでは、設定をオンにした後は、トランジション後のアートボードが同じ位置までスクロールされた状態で表示されるため、クリックしたボタンの背景が変化したように見えます。

Tip 3. ひとつ前のアートボードに戻る

#adobexd #protip Design complex paths by using the “Previous Artboard” target to return to the artboard that you just came from. @adobexd pic.twitter.com/4K6NUA7A4P

— Elaine Chao (@elainecchao) September 10, 2018

2つの画面を交互に表示するだけなら、それぞれが相手を遷移先に指定すれば実現できますが、ブラウザの「戻る」ボタンのように、常に前の画面に戻れるようにしたいときは、アクションから「ひとつ前のアートボード」を選択します。

Tip 4. 「プッシュ」と「スライド」の違い

#adobexd #protip A “push” transition moves the outgoing artboard at the same rate as the incoming one. @adobexd pic.twitter.com/GhYer2nZUI

— Elaine Chao (@elainecchao) September 12, 2018

トランジションにはアニメーションを付けられます。上下左右の4方向の何れかにアートボードが移動するアニメーションには、「プッシュ」と「スライド」の2種類があります。

「プッシュ」は、新しい画面と、元の画面が同じ速度で同じ方向に移動します。押し出されているように見えるため、「プッシュ」と呼ばれているわけです。上のビデオで実際の動作が確認できます。

#adobexd #protip A “slide” transition moves the outgoing artboard at a much slower rate than the incoming artboard, which gives a slight parallax effect. @adobexd pic.twitter.com/8nWy0QtCBn

— Elaine Chao (@elainecchao) September 13, 2018

それに対して、「スライド」は新しい画面の方がずっと速く移動します。そのため、上のビデオのように、パララックスのような表現になります。

アニメーションが必要ないケースのためには「なし」が用意されています。「なし」では、下のビデオのように、突然次の画面に切り替わります。切り替えを少しゆっくりにしたい場合には、「ディゾルブ」を利用しましょう。

#adobexd #protip Check out this requested feature: setting the segue to “none” for an instant transition! @adobexd pic.twitter.com/7qQ4tygSCI

— Elaine Chao (@elainecchao) August 26, 2016

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