Adobe XDの自動アニメーションとドラッグジェスチャー機能を使って、UIのインタラクションを実装したまとめ

Adobe XDの2018年10月のアップデートで使えるようになった新機能「自動アニメーション」「ドラッグジェスチャー」を使用して、Webサイトやスマホアプリで見かけるUIのさまざまなアニメーションやインタラクションの実装を紹介します。

Adobe XDの「自動アニメーション機能」はかなり簡単にさまざまなエフェクトやトランジションが短時間で実装できます。さらに「ドラッグジェスチャー」を加えることで、タッチデバイスのドラッグ操作をシミュレートでき、自動アニメーション機能をさらに一歩進めることができます。

Adobe XD: putting auto-animate to the test

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

ここで紹介したAdobe XDのファイルは、記事の最後でまとめてダウンロードできます。
また、ここで使用しているUIはAdobe XDの自動アニメーションとドラッグジェスチャー機能を試すことを目的としており、ユーザビリティを考慮するものではありません。

• 01. アクティビティフィードのカルーセル
• 02. Apple Music ダークモード
• 03. 棒グラフのアニメーション
• 04. 3Dのカルーセル
• 05. エフェクト スライダー
• 06. 受信トレイのコンセプトデザイン
• 07. スワイプすると削除
• 08. ロードシーケンス
• 09. 昼・夜のスライダー
• 10. LEGOの組み立て
• 11. クレジットカード
• 12. ラジオ周波数の選択
• 13. パララックススクロール
• 14. 絵文字の反応
• 15. プル トゥ リフレッシュ
• 16. 波形スライダー
• Adobe XDのファイルのダウンロード

01. アクティビティフィードのカルーセル

Adobe XDの自動アニメーションとドラッグジェスチャー機能を使って、パララックスに対応したカルーセルを作成しました。

このアニメーションは、スクリーンをスワイプするとアニメーションする3枚のカードで構成しています。画像はスワイプすると視差効果を与え、このアニメーションは中間のスライド上のマスク内の画像をオフセットすることによって作成しました。ドラッグすると、最終的な状態に0秒のトランジションで中間のスライドに自動アニメーションします。また、ページネーションのドットは円から細い棒状に変化し、円に戻る弾性エフェクトを与えました。

Adobe XDファイルの構成

自動アニメーションのアートボードの設定です。

このアニメーションに使用している記事は、下記の通りです。

• Branding needs to evolve for the digital age
• Defining brand design principles, a how to guide
• Are your designs adding value, or are you feeding an addiction?

02. Apple Music ダークモード

Adobe XDのドラッグジャスチャーとトランジションによる自動アニメーションを作成しました。

私は自分のiPhoneで音楽アプリをいろいろなモードに切り替えて遊んでいた時に、Adobe XDで構築できないかと思いつきました。XDで試したところ、簡単すぎて驚きました。音楽アプリのダークモードが好きなので、ダークモードで実装しています。

Adobe XDファイルの構成

自動アニメーションのアートボードには、2つの異なるビジュアルを使用しています。

03. 棒グラフのアニメーション

タブをタップすると、棒グラフが表示されながら切り替わるアニメーションをAdobe XDで作成しました。

Adobe XDのアニメーションはカラー間でトランジションするのではなく、次の状態になる前の最初に新しいカラーに変化します。そのため、背景色のトランジションにフェード効果を与えるには、背景ブロックを作成し、不透明度を0%または100%に変更して作成する必要があります。

Adobe XDファイルの構成

トリガーをタップに設定。

04. 3Dのカルーセル

カルーセルに3Dのパララックスを使用して画像を表示します。

このアニメーションは簡単ですが、設定するのが少し面倒でした。画像カードを用意し、それらをz-indexで異なるサイズに拡大縮小し、不透明度を調整します。矢印をタップすると、これらの状態間を遷移し、3Dの奥行きを与えます。画像はUnsplashです。

Adobe XDファイルの構成

ボードの設定はシンプルです。

カードの遷移はタップに設定。

05. エフェクト スライダー

モノクロの画像エフェクト、ドラッグジェスチャーと自動アニメーション機能を使用してAdobe XDで作成された、元の画像と比較するために使用されるスライダー。

さきほど同じくUnsplashの画像を使用して、状態が異なる2つの画像を比較できるようにするスライダーを作成しようと考えました。写真の情報は、下部に配置されています。

このエフェクトをインタラクションではなく、アニメーションで実現するために、左右にドラッグできるスライダーと画像キャプションで移行するロードシーケンスで構成されています。

Adobe XDファイルの構成

アートボード間のトリガーは時間に設定。

スライダー操作のトリガーはドラッグに設定。

06. 受信トレイのコンセプトデザイン

Adobe XDの自動アニメーション機能を使用した受信トレイのプロトタイプ。

ドラッグジェスチャーを使用すると、ユーザーはスクリーンの端からドラッグしてメールアプリケーションの動作を表示できます。アイコンをタップすると、さらに詳細が表示されます。これにより、アイコンがUIの別の位置に移動するという興味深いアニメーションを可能にしました。
下に表示されるリストはカスケード方式で、各要素にオフセットを設定して前の要素からさらに遠ざけることによって実現されています。

Adobe XDファイルの構成

07. スワイプすると削除

メールアプリのUIにあるスワイプすると削除をAdobe XDで作成しました。

スワイプで削除するアイデアを考えていた時、スワイプ中に要素のテキストを消すために線を使用して詳細を追加しました。遅延を使用して、ユーザーがそのアクションをキャンセルできるように、UNDOも加えました。UNDOを操作しなければ、そのまま削除され、空いたスペースをカバーするためにリストは上に移動します。

ループのアニメーションを作成するために、遅延のトランジションを使用して最後のアートボードを最初のアートボードにリンクしています。これによりシーケンスがリセットされ、削除されたリストアイテムが表示されます。

Adobe XDファイルの構成

UNDOにはタップと時間のトリガーを設定。

08. ロードシーケンス

Adobe XDの自動アニメーションで、ローディングバーとグラフが構築されます。

ロードシーケンスのために私はグラデーションを使用してみました。マスクで隠し、大きな長方形を作成し、アニメーションでグラデーションのトランジションを作成してその位置を変更しています。

グラフは不透明度0%から100%までアニメーション化されており、グラフの番号はマスクで位置を変更して表示されます。

Adobe XDファイルの構成

トランジションは時間をトリガーに。

09. 昼・夜のスライダー

昼と夜が切り替わるスライダーをAdobe XDで作成しました。

太陽から月へのトランジションは、交差する2つの円で作成しました。太陽の周りの線は点から線にフェードインし、背景はフェードイン・アウトします。ドラッグのスライダーはトリガーをドラッグにし、リンクされたマスクと白い長方形です。

Adobe XDファイルの構成

太陽と月のトランジション設定。

スライダーのトリガーはドラッグ。

10. LEGOの組み立て

自動アニメーションとドラッグジェスチャーを使用して、Adobe XDで作成しました。

自動アニメーションのドラッグアクションを使用すると、LEGOのさまざまなピースをドラッグして組み合わせることができます。組み立てた後には、アートボード間で時間をトリガーにして、笑顔にトランジションします。

Adobe XDファイルの構成

それぞれのピースはタップとドラッグで。

11. クレジットカード

複数のカードを重ね、タップで切り替えるアニメーションをAdobe XDで作成しました。

このシーケンスを設定するには、いくつかのアートボードが必要です。すべてのカードを含むアートボード、各カードを含むアートボードを画面の上部に配置し、残りは下部に配置します。

各カードの詳細も表示したかったので、カードをタップした後、カードの下から詳細をスライドさせるために自動アニメーションを使用して時間をトリガーにしました。

Adobe XDファイルの構成

上は各カードを表示した状態、下は各カードの詳細。

12. ラジオ周波数の選択

自動アニメーションとドラッグジェスチャーを使用して、Adobe XDで作成しました。

Adobe XDで数字のカウンターが作成されているのを見て、私もやってみようと思いました。3つの垂直方向の数字のリストとマスクを使用して、カウンターのエフェクトを作成しています。周波数線をドラッグすることで操作できます。

Adobe XDファイルの構成

周波数線のトリガーはドラッグで。

13. パララックススクロール

Adobe XDの自動アニメーションとドラッグジェスチャーを使用して作成されたパララックス。

さまざまなレイヤー、垂直方向のオフセットを持つ図形、水平方向のオフセットを持つテキストで構成されています。2つのアートボード間でトランジションするためにドラッグ可能な要素を作成しました。

Adobe XDファイルの構成

ドラッグをトリガーに垂直・水平方向に図形とテキストが移動します。

14. 絵文字の反応

タップすると絵文字の表情が変わるアニメーションをAdobe XDで作成しました。

目や口などのさまざまな要素をアニメーションするために、この絵文字を作成しました。アートボードにはそれらの要素をコピぺし、位置と不透明度を変更して、自動アニメーション機能を使用しています。トリガーにはタップと時間を指定しました。

Adobe XDファイルの構成

タップと時間で要素をトランジション。

15. プル トゥ リフレッシュ

下にスワイプするとリフレッシュするアニメーションをAdobe XDで作成しました。

アートボード間のタイムトランジションを開始するドラッグアクションを使用すると、このシーケンスが実行されます。背景の円はアートボード間に配置され、オフセットされているリピートグリッド内の円の広いエリアを使用します。

次のリストアイテムが表示されると、滴はリストアイテム内のワイヤフレームサークルに遷移します。

Adobe XDファイルの構成

アートボード

背景の円は、アートボードの間に配置されています。

16. 波形スライダー

スライダーを動かすと波線が変化するアニメーションをAdobe XDで作成しました。

異なるレイヤー上で線の位置を変えることによって、波を作りました。波線はすべて異なる長さで、各波がトランジション中に異なる速度で移動することを可能にします。スライダーのドラッグジェスチャーと自動アニメーションを組み合わせて、2つのアートボードの状態間を移動しました。

Adobe XDファイルの構成

ドラッグで波線が変化。

Adobe XDのファイルのダウンロード

ここで紹介したAdobe XDのファイルは、下記からダウンロードできます。

AdobeXD-Auto-Animate.xd -Dropbox

Adobe XDの自動アニメーションとドラッグジェスチャーの基本機能については、Adobeの動画をご覧ください。

Adobe XDの自動アニメーション

Adobe XDのドラッグジェスチャー