ドラッグトリガーを使用する - Adobe XDのチュートリアル

このレッスンでは、 ドラッグトリガーについて説明します。 教材として エクササイズファイルのフォルダーにある 10_06.xd を使います。 自動アニメーションに ドラッグトリガーを組み合わせることで、 実際のドラッグ操作のような インタラクションを作成します。 現在３枚のアートボードを 用意していますが、 すでにアニメーションを設定してあります。 デスクトッププレビューを表示し、 矢印のボタンを押してみましょう。 このように カードが捲れる動きをします。 プレビューは閉じておきます。 一見複雑なように見えますが、 レイヤーパネルで確認してみますと、 例えば drag_01 のアートボードにある Photo01 という写真は drag_02 のアートボードですと、 ここにいます。 「アピアランス」の「不透明度」を 100%にするとわかりやすいのですが、 アートボードを跨いで Photo01 は位置と角度と 不透明度が変化していて、 それを自動アニメーションが 補間してくれている という状態です。 プロトタイプモードに切り替えます。 今回はこの写真を 写真自体をドラッグして 自動アニメーションが起こる という設定を加えていきたいと思います。 drag_01 というアートボードにある この写真を選択し、 接続ハンドルを drag_02 のアートボードの上で 離します。 「インタラクション」の 「トリガー」のところで 「ドラッグ」を選択してください。 これで「ドラッグ」というきっかけで 自動アニメーションが起こる ということになります。 同じく drag_02 の上にある 写真の上でも 接続ハンドルをドラッグし、 「トリガー」を「ドラッグ」と 設定しておきます。 デスクトッププレビューで確認すると、 このように 写真自体をドラッグして 次のアートボードに 遷移することができます。 ドラッグトリガーを使用し、 このように 写真を次々にドラッグして 表示させるアプリのインタラクションなどを 作成することができます。 このレッスンでは、 ドラッグトリガーについて説明しました。