マーカーネット株式会社

WEB制作ブログ WEBデザイン、HTMLコーディング、PHP、スマートフォン制作などWEB制作全般に役立つ情報を発信していきます。

WEBデザイン

Adobe XD アニメーションの作り方 ①

投稿日:

こんにちは、デザイナーのAです。
今回はAdobe XDの自動アニメーション機能についてご紹介いたします。

Adobe XD 自動アニメーション機能とは

Adobe XDの自動アニメーション機能は、デザイン制作においてイメージが伝わりにくい動き(アニメーション)を簡易的に表現することができます。

今回は4つのオブジェクトがフワッと下からスライドしてくる簡単なアニメーションを作ってみたいと思います!

作成方法

(1)アートボード内(サンプルはアートボード名「design」)に4つのオブジェクトを用意します。

(2)4つのオブジェクトを配置後、アートボードを複製、(サンプルはアートボード名「design_before」)

(3)「design_before」の4つのオブジェクトの属性(サイズ、位置、角度 etc…)を変更し、画面上部のタブ「デザイン」から「プロトタイプ」に切り替えます。

(4)「プロトタイプ」の状態でアートボード「design_before」をクリックすると、アートボードからアートボードへ線を繋ぐことができます。
右側の画面でトリガー、アクションの種類、イージング、デュレーションを設定します。

トリガー
=アニメーションを起動するオプション。

アクションの種類
=1 つのトリガーに、2 つのアクションを割り当てることが可能。
トランジション、自動アニメーション、オーバーレイ、ひとつ前のアートボード、オーディオ再生、音声を再生の種類があります。

イージング
=動きの加速または減速に緩急をつけることが可能。イーズインアウト、イーズイン、イーズイン/アウト、スナップ、ワインドアップ、バウンスの種類あります。

デュレーション
=イージング効果の持続時間を入力して、イージング効果が持続する時間の長さを指定します。

今回は、トリガー:タップ、種類:自動アニメーション、移動先:design、イージング:イーズアウト、デュレーション:1秒で設定。

画面右上の再生ボタン(デスクトッププレビュー)をクリックすると、アニメーションを確認することができます!

東京のWEB制作会社 マーカーネット株式会社 公式WEBサイトへ

-WEBデザイン

執筆者:

関連記事

知らなかった!じゃ済まされない。フラットデザインの落とし穴

こんばんわ!WEBデザイナー歴10年目に突入間近のHです! 以前、2015年に流行るWEBデザインのトレンドを3つ、ご紹介させて頂きました。 ①フラットデザインの更なる普及 ②クリックを出来るだけ減ら …

動物や人物の写真を一瞬で切り抜き?!すごすぎる無料ツール「remove.bg」

こんにちは、デザイナーのAです。 今回は人物や動物が映った写真の背景だけを一瞬で切り抜いてくれる無料ツール「remove.bg」をご紹介します。 ※6月のアップデートデートでかなり対象の幅が広がったよ …

事前に調べよう!2015年ウェブデザイントレンド!

こんばんわ!新人のKです!今回は今後、ウェブデザインのトレンドについて少し説明させていただきと思います。 01.背景イメージORムービー入れ(Large, Beautiful Background I …

手軽に雰囲気を変える!無料英字webフォントのまとめ -素敵な明朝フォント編-

webフォントは日本のホームページには今一歩馴染みが無いかもしれませんが これから先、SEOを視野に入れたものはほぼテキストで作成することが望まれます。 今回はその第二弾として「素敵な明朝英字フォント …

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(3)

デザイナーの常識!? いいデザインと悪いデザインの見分け方 その(3)

こんにちは、デザイナーのAです。 以前、いいデザインと悪いデザインの見分け方についてご紹介いたしました。 いいデザインと悪いデザインの見分け方 その(1) いいデザインと悪いデザインの見分け方 その( …