【Drama】タイムラインでアニメーションを作ろう!

はじめに

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

昨日は 「Safariで動画と音声が再生されない場合の解決方法」の記事でした。

Safariで動画と音声が再生されない場合の解決方法

今日は、デザインツール「Drama」を使って、以前紹介したアニメーションの作り方の応用編をご紹介します。

前回のDrama紹介記事：
「【Drama】ホバーアニメーションを作ろう」

「Drama」初心者の方は、こちらの記事もよければ覗いてみて下さい。

「デザインツール「Drama」を触ってみた」

タイムラインを表示しよう

まず、今回作成したものはこちらです。
「透過 / 移動」のアニメーションの組み合わせで「フォーム送信ボタン」を作成しています。

＼完成形はこちら！／

土台を作ろう

では、まず以下のようなシーン（アートボード）を作りましょう。

最後には、以下の３つのボタンを一つに統合しますが、構成要素を分かりやすくするために分けています。

シーンの作成が終わったら、次はタイムライン上での操作になります。

タイムラインとは、アニメーション全体の流れを時系列で管理する機能のことです。

それでは、画面下部にある「Edit Animation」ボタンをクリックしてください。

すると、画面下部にタイムラインが表示されます。

実際にこれからアニメーションを設定していきましょう。

透過アニメーション

設定操作は下のGIFを参考にご覧ください。

動画内での手順

(1) アニメーションを付けたいレイヤーを選択 します
動画ではメールアイコンと「Submit」のテキストを選択しています。

(2) タイムライン上の赤線を横ドラッグして、何秒後に変化させたいかを決めます
動画では1s(秒後)のところに設置しています。

(3) 画面右側メニューから「変化させたい属性」の数値を変更します
今回は透明度を100%から0に変化させたいので、0%になるようにします。

(4) アニメーションを再生して確認します
ショートカットキーは、「Shiftキー」で再生・停止できます。

これで、最初の「Submit」テキストを透過させるアニメーションが完成しました！

次は、「Sending…」テキストも同じように透過アニメーションを付けていきます。

「S / e / n / d / i / n / g / . / . / .」と一文字ずつ、レイヤーを分けていきます。

そして一文字ずつ「透過0%→100%」になるようにアニメーション作成した時のタイムラインがこちらです。

ここまでのアニメーションを再生すると、以下のようになります。

移動アニメーション

次は、「紙飛行機が左から右へ移動する」アニメーションを作成します。

こちらの作成手順も、先ほどの透過とほぼ変わりません。

アニメーションを開始したい位置から、移動させたい位置までドラッグさせます。
（GIF動画内の「-72」「39.4」の数値を変えることでも移動できます）

ラインのアニメーション

紙飛行機が移動・非表示後に、以下のような「チェックマーク」が描かれるアニメーションを作成していきましょう。

まずはペンツール（ショートカット：P）でチェックマークを書きます。

次に、右メニューの「Stroke」右にあるカラーサムネをクリックしてウィンドウを表示させます。

デフォルトでは「Solid Line」となっている場所をクリックして、「Partial Line」に変更します。

「Partial Line」を選択したら、その下に「LINE END」という％数値が表示されます。

そして、こちらの数値を変えることで、「何％描画されるか」が変わってきます。

この数値をタイムラインに刻むことで、徐々にチェックマークが描かれるアニメーションを作成することができます。

また、背景色が青から緑に変わるアニメーションも設定しました。

イージングの設定

最後に、おまけでイージング（アニメーションの加速度を増減させる機能）について紹介します。

まず、イージングを追加したいアニメーションを選択します。

するとタイムラインの右側にイージングのグラフが表示されますので、あとはお好みで選択してください。

一つ一つ試してみて イメージにあったものを選択したり、「custom」でお好みの加速度を追加したりできます。

以上でタイムラインを使ったアニメーションの設定は完了です！

＼完成したものはこちら！／

まとめ

以上、Dramaのタイムラインを使ってアニメーションを作成する手順をご紹介しました。

初めてタイムラインを使用される方は 最初は戸惑うかもしれませんが、徐々に慣れていくと After EffectsやPremiereのような他の映像作成ツールとも操作が似ているため、アニメーション入門ツールとしてもオススメです！

他のアニメーションも作りたい！という方は、Drama公式チュートリアルもありますので、ぜひ参考に見てみてください。

【公式チュートリアル はこちら】
https://www.drama.app/tutorials

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