XDの2018年10月のアップデートで使えるようになった新機能「自動アニメーション」「ドラッグジェスチャー」を使用して、Webサイトやスマホアプリで見かけるUIのさまざまなアニメーションやインタラクションの実装を紹介します。XDの「自動アニメーション機能」はかなり簡単にさまざまなエフェクトやトランジションが短時間で実装できます。「ドラッグジェスチャー」を加えることで、タッチデバイスのドラッグ操作をシミュレートでき、自動アニメーション機能をさらに一歩進めることができます。test下記は各ポイントを意訳したものです。※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。XDのファイルは、記事の最後でまとめてダウンロードできます。XDの自動アニメーションとドラッグジェスチャー機能を試すことを目的としており、ユーザビリティを考慮するものではありません。XDの自動アニメーションとドラッグジェスチャー機能を使って、パララックスに対応したカルーセルを作成しました。このアニメーションは、スクリーンをスワイプするとアニメーションする3枚のカードで構成しています。画像はスワイプすると視差効果を与え、このアニメーションは中間のスライド上のマスク内の画像をオフセットすることによって作成しました。ドラッグすると、最終的な状態に0秒のトランジションで中間のスライドに自動アニメーションします。ページネーションのドットは円から細い棒状に変化し、円に戻る弾性エフェクトを与えました。自動アニメーションのアートボードの設定です。このアニメーションに使用している記事は、下記の通りです。XDのドラッグジャスチャーとトランジションによる自動アニメーションを作成しました。XDで構築できないかと思いつきました。XDで試したところ、簡単すぎて驚きました。音楽アプリのダークモードが好きなので、ダークモードで実装しています。自動アニメーションのアートボードには、2つの異なるビジュアルを使用しています。XDのアニメーションはカラー間でトランジションするのではなく、次の状態になる前の最初に新しいカラーに変化します。そのため、背景色のトランジションにフェード効果を与えるには、背景ブロックを作成し、不透明度を0%または100%に変更して作成する必要があります。XDファイルの構成トリガーをタップに設定。3Dのカルーセルカルーセルに3Dのパララックスを使用して画像を表示します。このアニメーションは簡単ですが、設定するのが少し面倒でした。画像カードを用意し、それらをz-indexで異なるサイズに拡大縮小し、不透明度を調整します。矢印をタップすると、これらの状態間を遷移し、3Dの奥行きを与えます。画像はUnsplashです。XDファイルの構成ボードの設定はシンプルです。カードの遷移はタップに設定。XDで作成された、元の画像と比較するために使用されるスライダー。さきほど同じくUnsplashの画像を使用して、状態が異なる2つの画像を比較できるようにするスライダーを作成しようと考えました。写真の情報は、下部に配置されています。このエフェクトをインタラクションではなく、アニメーションで実現するために、左右にドラッグできるスライダーと画像キャプションで移行するロードシーケンスで構成されています。XDファイルの構成アートボード間のトリガーは時間に設定。スライダー操作のトリガーはドラッグに設定。XDの自動アニメーション機能を使用した受信トレイのプロトタイプ。ドラッグジェスチャーを使用すると、ユーザーはスクリーンの端からドラッグしてメールアプリケーションの動作を表示できます。アイコンをタップすると、さらに詳細が表示されます。これにより、アイコンがUIの別の位置に移動するという興味深いアニメーションを可能にしました。下に表示されるリストはカスケード方式で、各要素にオフセットを設定して前の要素からさらに遠ざけることによって実現されています。スワイプで削除するアイデアを考えていた時、スワイプ中に要素のテキストを消すために線を使用して詳細を追加しました。遅延を使用して、ユーザーがそのアクションをキャンセルできるように、UNDOも加えました。UNDOを操作しなければ、そのまま削除され、空いたスペースをカバーするためにリストは上に移動します。ループのアニメーションを作成するために、遅延のトランジションを使用して最後のアートボードを最初のアートボードにリンクしています。これによりシーケンスがリセットされ、削除されたリストアイテムが表示されます。XDファイルの構成UNDOにはタップと時間のトリガーを設定。XDの自動アニメーションで、ローディングバーとグラフが構築されます。ロードシーケンスのために私はグラデーションを使用してみました。マスクで隠し、大きな長方形を作成し、アニメーションでグラデーションのトランジションを作成してその位置を変更しています。グラフは不透明度0%から100%までアニメーション化されており、グラフの番号はマスクで位置を変更して表示されます。XDファイルの構成トランジションは時間をトリガーに。太陽から月へのトランジションは、交差する2つの円で作成しました。太陽の周りの線は点から線にフェードインし、背景はフェードイン・アウトします。ドラッグのスライダーはトリガーをドラッグにし、リンクされたマスクと白い長方形です。太陽と月のトランジション設定。スライダーのトリガーはドラッグ。自動アニメーションのドラッグアクションを使用すると、LEGOのさまざまなピースをドラッグして組み合わせることができます。組み立てた後には、アートボード間で時間をトリガーにして、笑顔にトランジションします。XDファイルの構成それぞれのピースはタップとドラッグで。このシーケンスを設定するには、いくつかのアートボードが必要です。すべてのカードを含むアートボード、各カードを含むアートボードを画面の上部に配置し、残りは下部に配置します。各カードの詳細も表示したかったので、カードをタップした後、カードの下から詳細をスライドさせるために自動アニメーションを使用して時間をトリガーにしました。上は各カードを表示した状態、下は各カードの詳細。XDで数字のカウンターが作成されているのを見て、私もやってみようと思いました。3つの垂直方向の数字のリストとマスクを使用して、カウンターのエフェクトを作成しています。周波数線をドラッグすることで操作できます。周波数線のトリガーはドラッグで。XDの自動アニメーションとドラッグジェスチャーを使用して作成されたパララックス。さまざまなレイヤー、垂直方向のオフセットを持つ図形、水平方向のオフセットを持つテキストで構成されています。2つのアートボード間でトランジションするためにドラッグ可能な要素を作成しました。XDファイルの構成ドラッグをトリガーに垂直・水平方向に図形とテキストが移動します。目や口などのさまざまな要素をアニメーションするために、この絵文字を作成しました。アートボードにはそれらの要素をコピぺし、位置と不透明度を変更して、自動アニメーション機能を使用しています。トリガーにはタップと時間を指定しました。XDファイルの構成タップと時間で要素をトランジション。アートボード間のタイムトランジションを開始するドラッグアクションを使用すると、このシーケンスが実行されます。背景の円はアートボード間に配置され、オフセットされているリピートグリッド内の円の広いエリアを使用します。次のリストアイテムが表示されると、滴はリストアイテム内のワイヤフレームサークルに遷移します。XDファイルの構成アートボード背景の円は、アートボードの間に配置されています。異なるレイヤー上で線の位置を変えることによって、波を作りました。波線はすべて異なる長さで、各波がトランジション中に異なる速度で移動することを可能にします。スライダーのドラッグジェスチャーと自動アニメーションを組み合わせて、2つのアートボードの状態間を移動しました。XDファイルの構成ドラッグで波線が変化。XDのファイルは、下記からダウンロードできます。XDの自動アニメーションとドラッグジェスチャーの基本機能については、Adobeの動画をご覧ください。