2019年12月12日
デザイン
【Drama】ホバーアニメーションを作ろう
はじめに
新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay12です！
昨日は 「Web Audio API + three.js で音に連動する3Dオブジェクトを作ってみた！」の記事でした。
今日は、デザインツール「Drama」を使って、プロトタイプで良く使うアニメーションの作り方をご紹介します。
「Drama」初心者の方は、こちらの記事でも「ダウンロード〜ちょっと触ってみた感想」について触れていますので、よければ覗いてみて下さい。
「デザインツール「Drama」を触ってみた」
https://bagelee.com/design/drama/
色変化アニメーション
まずはシンプルに、「ホバーすると色が変わる」アニメーションを作成してみます。
＼完成形はこちら！／
土台を作ろう
では、まず以下のような２つのシーン（アートボード）を作りましょう。
「Scene1」はホバー前、「Scene2」はホバー時のデザインです。
レイヤーは「button」というグループの中に「テキスト」と「四角形」を配置しています。
アニメーションをつけよう (マウスオーバー編)
次に、「クリックやホバーなど、どの操作をアニメーション発動のトリガーにするか」を設定していきます。
以下のGIFを参考にみて下さい。操作の内容はこちらです↓
(1)「button」レイヤーの右上にある「雷アイコン」に注目して下さい。
そのアイコンにマウスを重ね、「Scene2」までドラッグ＆ドロップします。
(2)ドロップすると同時に、メニューが表示されるため、今回は「Mouse Enter」(マウスオーバー）を選択します。
アニメーションをつけよう (マウスアウト編)
「Scene2」から「Scene1」に移行するアニメーションも同じように追加します。
「Scene2」のボタンから、「Mouse Exit」(マウスアウト)を選択します。
以上でアニメーションをつける作業は終わりです！
アニメーションを確認しよう
アニメーションを確認するためには、画面右上の「Simulator」をクリックします。
すると、プロトタイプのウィンドウが表示されます。
↑ちなみに、アニメーションする早さを変えたい場合は、「DURATION」の数値を変えると良いです。
＼完成です！／
シャドウアニメーション
シャドウも先ほどのアニメーション作成手順と全く同じです。
以下のように、ホバー前(Scene6)とホバー後(Scene5)の２シーンを用意します。
参考までに、「Scene5」では以下のような数値でシャドウをボタンに当てています。
変形アニメーション
シンプルな図形を使った変形アニメーションも可能です。
＼完成形はこちら！／
まず、これまでと同じようにアニメーション前・後の２シーンを作成します。
このアニメーションのポイントは、連携させたいレイヤー（またはグループ）同士の名前を揃えることです！
その一手間だけで、あとは他の事例と同じように変形アニメーションとして自動で動いてくれます。
まとめ
以上、Dramaでホバーアニメーションを作成する手順をご紹介しました。
個人的に、初めてDramaでアニメーションを作成してみましたが、Figmaなど他のプロトタイプツールと比べて操作が直感的でわかりやすいと感じました。
今回は、ホバーのプロトタイプで使いやすそうな基本のアニメーションを取り上げてきましたが、次回はアニメーションのタイムラインを使用した応用編について紹介する予定です。 お楽しみに！
【Dramaダウンロードはこちら！】
https://www.drama.app/
この記事は
参考になりましたか？
0
0
AUTHOR
しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
関連記事
アプリでもっと便利に！気になる記事をチェック！
記事のお気に入り登録やランキングが表示される昨日に対応！毎日の情報収集や調べ物にもっと身近なメディアになりました。
palanでは一緒に働く仲間を募集しています
正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、
ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。
運営メンバー
Eishi Saito 総務
SIerやスタートアップ、フリーランスを経て2016年11月にeishis, Inc.を設立。 マーケター・ディレクター・エンジニアなど何でも屋。 COBOLからReactまで色んなことやります。
sasakki デザイナー
アメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。
しまだ デザイナー
WebAR/VRのデザインと3DCG制作がメインです。 肩書きは「アニメ案件に関わりたいデザイナー」。
Miu マーケター
ドイツでWEBマーケティングしています。
しんのき エンジニア
主に React Native を使ったアプリ開発と AWS や Firebase を使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。
やまかわたかし デザイナー
フロントエンドデザイナー。デザインからHTML / CSS、JSの実装を担当しています。最近はReact NativeやReact360をよく触っています。
furuya エンジニア
サーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。
Sayaka Osanai デザイナー
Sketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。 好きな食べものは生ハムとお寿司とカレーです。
はらた エンジニア
サーバーサイドエンジニア Ruby on Railsを使った開発を行なっています
うえまつゆい エンジニア
サーバーサイドエンジニアからフロントエンドエンジニアになりました。主にReact Nativeでのアプリ開発をしています。
こぼり ともろう エンジニア
サーバーサイドエンジニア。SIerを経て2019年7月に入社。日々学習しながらRuby on Railsを使った開発を行っています。
ささい エンジニア
フロントエンドエンジニア WebGLとReactが強みと言えるように頑張ってます。
Damien
WebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。森に住んでいます。
