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

はじめに

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

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

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/