アニメーションの種類 - Adobe XDのチュートリアル

このレッスンでは、 アニメーションの種類について説明します。 教材として エクササイズファイルのフォルダーにある 10 フォルダーの中の 10_02.xd を使います。 まず画面左上で プロトタイプモードに 切り替えておきます。 トップのアートボードにある 「ホバーアニメーション」という ボタンを選択すると、 右側に接続ハンドルが 表示されますので、 それをドラッグして、 answerA のアートボードの上で 離します。 右側の「アニメーション」のところを 確認すると、 デフォルトで「ディゾルブ」に なっていますが、 今回はこれを 「左にプッシュ」に切り替えましょう。 続いて answerA のアートボードの Back というボタンを クリックします。 接続ハンドルが表示されますが、 ここでクリックし、 「アクション」の中の「種類」のところで 「ひとつ前のアートボード」 を選択します。 ワイヤーの先端に 曲がった矢印のアイコンが 表示されました。 この状態で 右上の「デスクトッププレビュー」 を確認します。 「ホバーアニメーション」のボタンを クリックすると、 このように最初に見えていた画面が 押し出され、 次のアートボードに切り替わる という動きができました。 続いて Back のボタンを 押してみましょう。 ひとつ前のアートボードに アニメーションを逆再生して 戻るという動きができました。 続いて もう一度「ホバーアニメーション」の ボタンを選択し、 接続ハンドルが表示されている状態で 「アニメーション」を 「左にスライド」 に変更します。 これでもう一度デスクトッププレビューを 見てみましょう。 確認すると、 少し動きが変わって プッシュと比べて 少し下効果が加わった動きになりました。 Back を押すと やはり逆再生で戻ります。 残りの２つのボタンも 他のアートボードに遷移しましょう。 ページ内リンクのボタンをクリックし、 接続ハンドルをドラッグして、 answerB のアートボードの上で離し、 アニメーションを左にスライド、 answerB の Back のボタンは 接続ハンドルをクリックして、 種類をひとつ前のアートボードにします。 「外部リンク」 のボタンも ドラッグしても良いのですが、 接続ハンドルをクリックして、 移動先のところで…