マーカーネット株式会社

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

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

関連記事

覚えたいんだから~!Photoshopのショートカット編

覚えたいんだから~!Photoshopのショートカット編 http://www.markernet.co.jp/blog/2015/07/02/post-5630/ Facebook

2014年秋冬の流行色?

こんばんは、新人Aです。 すっかり気温も秋めいて来ましたね! 季節が変わると気になるのは流行色!ファッションやデザインには欠かせない流行色ですが、今年は何が流行っているんでしょう? ずばり、【ラディア …

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

【スタイル次第で変幻自在!】巷で話題のSVG3つのポイントご紹介

「SVG」というイメージフォーマットをご存知でしょうか? SVG(Scalable Vector Graphics)とはIllustratorで制作されるような、ベクターデータをWEB上で表示すること …

【photoshop】素材なしで手軽にテキストを水彩風にするテクニック!

暑い日が続いておりますが、デザインする時も季節感を演出できたら、より人の目を引くデザインになるかもしれないですね。 ここで夏にふさわしい、テキストを涼しげな水彩風に加工するPhotoshopテクニック …

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

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

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