「Safariで動画と音声が再生されない場合の解決方法」の記事でした。今日は、デザインツール「Drama」を使って、以前紹介したアニメーションの作り方の応用編をご紹介します。「Drama」初心者の方は、こちらの記事もよければ覗いてみて下さい。「デザインツール「Drama」を触ってみた」タイムラインを表示しようまず、今回作成したものはこちらです。移動」のアニメーションの組み合わせで「フォーム送信ボタン」を作成しています。\完成形はこちら!/土台を作ろうでは、まず以下のようなシーン(アートボード)を作りましょう。最後には、以下の3つのボタンを一つに統合しますが、構成要素を分かりやすくするために分けています。シーンの作成が終わったら、次はタイムライン上での操作になります。タイムラインとは、アニメーション全体の流れを時系列で管理する機能のことです。Animation」ボタンをクリックしてください。すると、画面下部にタイムラインが表示されます。実際にこれからアニメーションを設定していきましょう。透過アニメーション設定操作は下のGIFを参考にご覧ください。します動画ではメールアイコンと「Submit」のテキストを選択しています。タイムライン上の赤線を横ドラッグして、何秒後に変化させたいかを決めます動画では1s(秒後)のところに設置しています。画面右側メニューから「変化させたい属性」の数値を変更します今回は透明度を100%から0に変化させたいので、0%になるようにします。アニメーションを再生して確認しますショートカットキーは、「Shiftキー」で再生・停止できます。これで、最初の「Submit」テキストを透過させるアニメーションが完成しました!次は、「Sending...」テキストも同じように透過アニメーションを付けていきます。.」と一文字ずつ、レイヤーを分けていきます。一文字ずつ「透過0%→100%」になるようにアニメーション作成した時のタイムラインがこちらです。ここまでのアニメーションを再生すると、以下のようになります。移動アニメーション次は、「紙飛行機が左から右へ移動する」アニメーションを作成します。こちらの作成手順も、先ほどの透過とほぼ変わりません。アニメーションを開始したい位置から、移動させたい位置までドラッグさせます。(GIF動画内の「-72」「39.4」の数値を変えることでも移動できます)ラインのアニメーション紙飛行機が移動・非表示後に、以下のような「チェックマーク」が描かれるアニメーションを作成していきましょう。ペンツール(ショートカット:P)でチェックマークを書きます。次に、右メニューの「Stroke」右にあるカラーサムネをクリックしてウィンドウを表示させます。Line」に変更します。END」という%数値が表示されます。こちらの数値を変えることで、「何%描画されるか」が変わってきます。この数値をタイムラインに刻むことで、徐々にチェックマークが描かれるアニメーションを作成することができます。背景色が青から緑に変わるアニメーションも設定しました。最後に、おまけでイージング(アニメーションの加速度を増減させる機能)について紹介します。イージングを追加したいアニメーションを選択します。するとタイムラインの右側にイージングのグラフが表示されますので、あとはお好みで選択してください。イメージにあったものを選択したり、「custom」でお好みの加速度を追加したりできます。以上でタイムラインを使ったアニメーションの設定は完了です!\完成したものはこちら!/まとめ以上、Dramaのタイムラインを使ってアニメーションを作成する手順をご紹介しました。EffectsやPremiereのような他の映像作成ツールとも操作が似ているため、アニメーション入門ツールとしてもオススメです!他のアニメーションも作りたい!という方は、Drama公式チュートリアルもありますので、ぜひ参考に見てみてください。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。関連記事アプリでもっと便利に!気になる記事をチェック!記事のお気に入り登録やランキングが表示される昨日に対応!毎日の情報収集や調べ物にもっと身近なメディアになりました。palanでは一緒に働く仲間を募集しています正社員や業務委託、アルバイトやインターンなど雇用形態にこだわらず、ベテランの方から業界未経験の方まで様々なかたのお力をお借りしたいと考えております。マーケター・ディレクター・エンジニアなど何でも屋。COBOLからReactまで色んなことやります。デザイナーアメリカの大学を卒業後、日本、シンガポールでデザイナーとして活動。デザイナーWebAR/VRのデザインと3DCG制作がメインです。肩書きは「アニメ案件に関わりたいデザイナー」。マーケタードイツでWEBマーケティングしています。使ったサーバーレスアーキテクチャを担当しています。元々はインフラとかPHPをやっていました。デザイナーフロントエンドデザイナー。CSS、JSの実装を担当しています。NativeやReact360をよく触っています。エンジニアサーバーサイド、フロントエンド、Unityと色々手を出してる雑食系エンジニア。ReactNativeが最近のマイブーム。デザイナーSketchだいすきプロダクトデザイナー。シンプルだけどちょっとかわいいデザインが得意。好きな食べものは生ハムとお寿司とカレーです。エンジニアサーバーサイドエンジニアからフロントエンドエンジニアになりました。Nativeでのアプリ開発をしています。エンジニアサーバーサイドエンジニア。SIerを経て2019年7月に入社。Railsを使った開発を行っています。WebGLとReactが強みと言えるように頑張ってます。DamienWebAR/VRを中心に企画やディレクションやエンジニアもちょっとやっています。TOP運営会社お問い合わせプライバシーポリシーは株式会社palanの運営する情報メディアです。おいしいデザイン・プログラミング情報をお届けします。クリエイター向けの記事を可愛く更新中!。