2019年12月12日

デザイン

【Drama】ホバーアニメーションを作ろう

dramadrama

目次

  1. はじめに
  2. 色変化アニメーション
  3. シャドウアニメーション
  4. 変形アニメーション
  5. まとめ

はじめに

新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay12です!

昨日は 「Web Audio API + three.js で音に連動する3Dオブジェクトを作ってみた!」の記事でした。

Web Audio API + three.js で音に連動する3Dオブジェクトを作ってみた!

今日は、デザインツール「Drama」を使って、プロトタイプで良く使うアニメーションの作り方をご紹介します。

「Drama」初心者の方は、こちらの記事でも「ダウンロード〜ちょっと触ってみた感想」について触れていますので、よければ覗いてみて下さい。

「デザインツール「Drama」を触ってみた」
https://bagelee.com/design/drama/

drama2.jpg (138.6 kB)

色変化アニメーション

まずはシンプルに、「ホバーすると色が変わる」アニメーションを作成してみます。

\完成形はこちら!/
5実際に見てみよう.gif (181.9 kB)

土台を作ろう

では、まず以下のような2つのシーン(アートボード)を作りましょう。
「Scene1」はホバー前、「Scene2」はホバー時のデザインです。

レイヤーは「button」というグループの中に「テキスト」と「四角形」を配置しています。

1こういうオブジェクト作ります.jpg (51.2 kB)

アニメーションをつけよう (マウスオーバー編)

次に、「クリックやホバーなど、どの操作をアニメーション発動のトリガーにするか」を設定していきます。

以下のGIFを参考にみて下さい。操作の内容はこちらです↓

(1)「button」レイヤーの右上にある「雷アイコン」に注目して下さい。
そのアイコンにマウスを重ね、「Scene2」までドラッグ&ドロップします。

(2)ドロップすると同時に、メニューが表示されるため、今回は「Mouse Enter」(マウスオーバー)を選択します。

2ホバーのアニメーション作るよ.gif (720.3 kB)

アニメーションをつけよう (マウスアウト編)

「Scene2」から「Scene1」に移行するアニメーションも同じように追加します。

「Scene2」のボタンから、「Mouse Exit」(マウスアウト)を選択します。

以上でアニメーションをつける作業は終わりです!

3ホバー解除のため同じようにするよ.jpg (58.5 kB)

アニメーションを確認しよう

アニメーションを確認するためには、画面右上の「Simulator」をクリックします。

すると、プロトタイプのウィンドウが表示されます。

6デュレーションはここから設定できるよ.png (100.2 kB)

↑ちなみに、アニメーションする早さを変えたい場合は、「DURATION」の数値を変えると良いです。

\完成です!/
5実際に見てみよう.gif (181.9 kB)

シャドウアニメーション

シャドウも先ほどのアニメーション作成手順と全く同じです。

以下のように、ホバー前(Scene6)とホバー後(Scene5)の2シーンを用意します。
7.jpg (40.9 kB)

参考までに、「Scene5」では以下のような数値でシャドウをボタンに当てています。
8.jpg (88.2 kB)

変形アニメーション

シンプルな図形を使った変形アニメーションも可能です。

\完成形はこちら!/
10.gif (89.5 kB)

まず、これまでと同じようにアニメーション前・後の2シーンを作成します。
9.jpg (40.3 kB)

このアニメーションのポイントは、連携させたいレイヤー(またはグループ)同士の名前を揃えることです!
12.jpg (65.8 kB)

その一手間だけで、あとは他の事例と同じように変形アニメーションとして自動で動いてくれます。

まとめ

以上、Dramaでホバーアニメーションを作成する手順をご紹介しました。

個人的に、初めてDramaでアニメーションを作成してみましたが、Figmaなど他のプロトタイプツールと比べて操作が直感的でわかりやすいと感じました。

今回は、ホバーのプロトタイプで使いやすそうな基本のアニメーションを取り上げてきましたが、次回はアニメーションのタイムラインを使用した応用編について紹介する予定です。 お楽しみに!

【Dramaダウンロードはこちら!】
https://www.drama.app/

デザインのお仕事に関するご相談

Bageleeの運営会社、palanではデザインに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。

無料相談フォームへ

0

0

AUTHOR

ゲスト bagelee

ゲスト bagelee

アプリでもっと便利に!気になる記事をチェック!

記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。

簡単に自分で作れるWebAR

「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。

palanARへ
palanar

palanはWebARの開発を
行っています

弊社では企画からサービスの公開終了まで一緒に関わらせていただきます。 企画からシステム開発、3DCG、デザインまで一貫して承ります。

webar_waterpark

palanでは一緒に働く仲間を募集しています

正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。

sasakki デザイナー

アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

yamakawa

やまかわたかし デザイナー

フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。

Sayaka Osanai デザイナー

Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた

はらた エンジニア

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

kobori

こぼり ともろう エンジニア

サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。

sasai

ささい エンジニア

フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。

damien

Damien

WebAR/VRの企画・開発をやっています。森に住んでいます。

ゲスト bagelee

ゲスト bagelee

かっきー

かっきー

まりな

まりな

suzuki

suzuki

miyagi

ogawa

ogawa

雑食デザイナー。UI/UXデザインやコーディング、時々フロントエンドやってます。最近はARも。

いわもと

いわもと

デザイナーをしています。 好きな食べ物はラーメンです。

kobari

taishi kobari

フロントエンドの開発を主に担当してます。Blitz.js好きです。

shogokubota

kubota shogo

サーバーサイドエンジニア。Ruby on Railsを使った開発を行いつつ月500kmほど走っています!

nishi tomoya

aihara

aihara

グラフィックデザイナーから、フロントエンドエンジニアになりました。最近はWebAR/VRの開発や、Blender、Unityを触っています。モノづくりとワンコが好きです。

nagao

SIerを経てアプリのエンジニアに。xR業界に興味があり、unityを使って開発をしたりしています。

kainuma

Kainuma

サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています

sugimoto

sugimoto

asama

ando

iwasawa ayane

oshimo

oshimo

異業界からやってきたデザイナー。 palanARのUIをメインに担当してます。 これからたくさん吸収していきます!

CONTACT PAGE TOP