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/

0

0

AUTHOR

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

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

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

簡単に自分で作れるWebAR

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

palanARへ
palanar

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

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

webar_waterpark

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

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

話を聞いてみたい

運営メンバー

eishis

Eishi Saito 総務

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

sasakki デザイナー

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

しまだ

しまだ デザイナー

WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。

Miu マーケター

ドイツでWEBマーケティングしています。

しんのき エンジニア

主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

yamakawa

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

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

furuya エンジニア

サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。

Sayaka Osanai デザイナー

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

はらた

はらた エンジニア

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

うえまつゆい エンジニア

サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

kobori

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

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

sasai

ささい エンジニア

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

damien

Damien

WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。

デザイナーゲスト

ゲスト デザイナー

CONTACT PAGE TOP