2019年12月19日

デザイン

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

目次

  1. はじめに
  2. タイムラインを表示しよう
  3. 透過アニメーション
  4. 移動アニメーション
  5. ラインのアニメーション
  6. イージングの設定
  7. まとめ

はじめに

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

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

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

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

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

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

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

ogp_drama.jpg (144.0 kB)

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

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

\完成形はこちら!/
1完成形_1.gif (153.2 kB)

土台を作ろう

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

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

2こういうシーンを作りましょう.png (20.9 kB)

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

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

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

3editanimationボタン押してね.jpg (42.5 kB)

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

4タイムラインが開くよ.jpg (45.9 kB)

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

透過アニメーション

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

動画内での手順

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

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

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

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

5透過の仕方_1.gif (1.1 MB)

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

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

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

6sendingを一文字ずつ作る.png (20.5 kB)

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

7先ほどと同じように、時間をずらしながら透過かける.jpg (78.0 kB)

ここまでのアニメーションを再生すると、以下のようになります。
9ここまでできました.gif (4.3 MB)

移動アニメーション

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

10移動.gif (29.8 MB)

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

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

ラインのアニメーション

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

14アニメーション.gif (6.9 MB)

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

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

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

11ラインの設定.png (93.3 kB)

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

そして、こちらの数値を変えることで、「何%描画されるか」が変わってきます。
11ラインの設定2.jpg (125.1 kB)

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

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

イージングの設定

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

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

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

13動き設定.jpg (47.1 kB)

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

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

\完成したものはこちら!/
1完成形_1.gif (153.2 kB)

まとめ

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

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

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

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

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

0

0

AUTHOR

しまだ

しまだ デザイナー

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

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

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

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