マーカーネット株式会社

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デザイン

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

【Illustrator】多角形を使った簡単な花形の作り方

【Illustrator】多角形を使った簡単な花形の作り方

みなさまこんばんは、新人Aです。 今日は、多角形を使って一瞬でお花の形にする方法をお話しようと思います! 数値をずらすだけで形が簡単に変わるので、とってもおすすめです。     【 …

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

WEBトレンド+αの作り込みで、心地よさが広がる素敵サイトをご紹介! ~素敵サイトの旅 その1~

こんにちは!風邪っぴきのweb初心者Kです。 週末に風邪を治しきれず、咳のため未だマスクが手放せません。 今日は誰とも口をきけないかも知れない!!! みなさまはお風邪など召されていませんか? さてさて …

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

【ワイヤー作成をラクにする!】レスポンシブ・ウェブデザイン(RWD)向けワイヤーツール

サイトの設計図とも言えるワイヤーフレームを作成することは、ウェブ制作において大事なステップです。 ワイヤーフレームとはサイトの大まかなレイアウト、必要な要素、コンテンツの優先順位を示したもので、ワイヤ …

フォントをまとめて比較!ウェブサービス「wordmark-it」

フォントをまとめて比較!ウェブサービス「wordmark-it」

こんにちは。マーカーネットスタッフのSです。 今回はデザイン制作に便利なサービスをご紹介したいと思います。 デザインで使うフォント選びは作品のクオリティを左右するといっても過言ではない大事な要素です。 …

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

【photoshop】アプリを使わず、簡単に写真を漫画風にアレンジする方法!

このお姉さんにあえて漫画調にマーカーネットをアピールしてもらうと… ちょっと面白くて勢いのある効果が生まれますね。 昨今では漫画的な加工を取り入れるWEBデザインも増えてきました。 ですので、今回は写 …