2019年12月12日
デザイン
【Drama】ホバーアニメーションを作ろう


はじめに
新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay12です!
昨日は 「Web Audio API + three.js で音に連動する3Dオブジェクトを作ってみた!」の記事でした。
今日は、デザインツール「Drama」を使って、プロトタイプで良く使うアニメーションの作り方をご紹介します。
「Drama」初心者の方は、こちらの記事でも「ダウンロード〜ちょっと触ってみた感想」について触れていますので、よければ覗いてみて下さい。
「デザインツール「Drama」を触ってみた」
https://bagelee.com/design/drama/
色変化アニメーション
まずはシンプルに、「ホバーすると色が変わる」アニメーションを作成してみます。
\完成形はこちら!/
土台を作ろう
では、まず以下のような2つのシーン(アートボード)を作りましょう。
「Scene1」はホバー前、「Scene2」はホバー時のデザインです。
レイヤーは「button」というグループの中に「テキスト」と「四角形」を配置しています。
アニメーションをつけよう (マウスオーバー編)
次に、「クリックやホバーなど、どの操作をアニメーション発動のトリガーにするか」を設定していきます。
以下のGIFを参考にみて下さい。操作の内容はこちらです↓
(1)「button」レイヤーの右上にある「雷アイコン」に注目して下さい。
そのアイコンにマウスを重ね、「Scene2」までドラッグ&ドロップします。
(2)ドロップすると同時に、メニューが表示されるため、今回は「Mouse Enter」(マウスオーバー)を選択します。
アニメーションをつけよう (マウスアウト編)
「Scene2」から「Scene1」に移行するアニメーションも同じように追加します。
「Scene2」のボタンから、「Mouse Exit」(マウスアウト)を選択します。
以上でアニメーションをつける作業は終わりです!
アニメーションを確認しよう
アニメーションを確認するためには、画面右上の「Simulator」をクリックします。
すると、プロトタイプのウィンドウが表示されます。
↑ちなみに、アニメーションする早さを変えたい場合は、「DURATION」の数値を変えると良いです。
\完成です!/
シャドウアニメーション
シャドウも先ほどのアニメーション作成手順と全く同じです。
以下のように、ホバー前(Scene6)とホバー後(Scene5)の2シーンを用意します。
参考までに、「Scene5」では以下のような数値でシャドウをボタンに当てています。
変形アニメーション
シンプルな図形を使った変形アニメーションも可能です。
\完成形はこちら!/
まず、これまでと同じようにアニメーション前・後の2シーンを作成します。
このアニメーションのポイントは、連携させたいレイヤー(またはグループ)同士の名前を揃えることです!
その一手間だけで、あとは他の事例と同じように変形アニメーションとして自動で動いてくれます。
まとめ
以上、Dramaでホバーアニメーションを作成する手順をご紹介しました。
個人的に、初めてDramaでアニメーションを作成してみましたが、Figmaなど他のプロトタイプツールと比べて操作が直感的でわかりやすいと感じました。
今回は、ホバーのプロトタイプで使いやすそうな基本のアニメーションを取り上げてきましたが、次回はアニメーションのタイムラインを使用した応用編について紹介する予定です。 お楽しみに!
【Dramaダウンロードはこちら!】
https://www.drama.app/
デザインのお仕事に関するご相談
Bageleeの運営会社、palanではデザインに関するお仕事のご相談を無料で承っております。
zoomなどのオンラインミーティング、お電話、貴社への訪問、いずれも可能です。
ぜひお気軽にご相談ください。
この記事は
参考になりましたか?
0
0
関連記事
簡単に自分で作れるWebAR
「palanAR」はオンラインで簡単に作れるWebAR作成ツールです。WebARとはアプリを使用せずに、Webサイト上でARを体験できる新しい技術です。
palanARへ
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー

Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にpalan(旧eishis)を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。

しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。

やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReactやReact Nativeをよく触っています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。

はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。

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

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

Damien
WebAR/VRを中心に企画・マークアップ・開発をやっています。森に住んでいます。

ゲスト デザイナー

かっきー

まりな

suzuki

taro
xR界隈のビズをやっています。新しいガジェットとか使うのが好きです。あとお寿司は玉子のお寿司が好きです。
miyagi

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