STUDIOでアニメーションを作ってみよう！第４回

こんにちは、ぷにゅです。
確定申告も終わりひと段落したのでアニメーションnoteを再開です。

アニメーションも第４回になったので、そろそろ上級アニメーションをやりたいと思い、同じSTUDIOを愛用されているフォロワーさんに協力いただきました。

今回私の超お気に入りの白デザインでのポートフォリを作成されているtakuさん(@takuNoCode1)に、実際に実装されているアニメーションをお借りし、その工程をnoteにしてみました。
takuさんとのこんな形でのコラボレーション、超ドキドキです！

心を奪われたtakuさんのポートフォリをはこちら

国産NoCodeツールSTUDIOで、コードを一切書かないWeb制作を始めて1ヶ月💻

今回、「優しく動く」ポートフォリオを作ってみました😆

IT未経験でもできるWeb制作を体験してみませんか？

STUDIOオススメです😊#NoCode #ノーコード #STUDIO https://t.co/rfMFfI3fVm

— taku / NoCode Designer (@takuNoCode1) December 8, 2020

それではまず模範となるtakuさんのポートフォリオから。

続いて完成版。

お断り
今回他の方のアニメーションをお借りしていますが、実装方法は同じではありません。
実装方法は１つではありませんので、自分なりの作り方として今回の方法を書いております。

今回上級編にしているのは前回やった文字ディレイ（言い方やっとわかった）の応用編を更に複合しているので上級編としています。
文字ディレイのやり方は第３回で説明してあるので、ぜひ参考にしてみてください。

それでは早速作っていきましょう☝️

１.レイヤー紹介

今回はレイヤーを載せておきます。

ボックスには分かりやすいように名前をつけてあります。（普段はここまで細かく名前をつける必要はないと思います）

２.イメージ配置

それではイメージを置きましょう。
数値は下記の通りです。
イメージが表示上うえにぴったりしているので下げるために入れています。
画像はなんでもOKです💡

３.文字を作ろう

それでは中身の文字を作っていきます。
今回文字を入れるBOXを使っています。
ここもBOXを使わず”文字をグループ化”でも大丈夫です💡
注）文字を"グループ化"して実装する場合は、この後のモーションが少し異なります。

文字の大きさは６４くらいです。
フォントはLoraを使用しました。
他の文字もいれて「 NOCODE」を作りましょう。

次は棒です。
文字BOXの下に配置し、数値は下記の通りです。

最後にWEBDESIGNの文字を入れます。
サイズは２８、フォントはLoraです。
残りの文字も入れて「WEBDESIGN」に仕上げましょう。

４.文字入れの箱設置

次に”文字の箱”BOXを作りましょう。
先ほど３で作った文字たちをもう１つBOXの中に入れ込みます。

文字を中に入れ込んだら左上にある配置を「固定」にします。

固定にするのは、画像を先に置いてその上に文字BOXをおきたいからです。
しかし、これも方法が他にもありますので、これが絶対ではありません。

「固定」にできたら横幅いっぱい、縦幅はイメージの真ん中に文字がくる位いに整えましょう。
こんな感じになっていればOKです。

５.アニメーションを付けよう

それではアニメーションを付けていきましょう💡

ここからのモーション数値はあくまでも参考です。
イージング、時間、遅延の組み合わせで様々なアニメーションを作り出すことが出来るので、参考程度に止めてください。

5-1.上の文字のアニメーション

まずは文字のアニメーションからです。

アニメーションは最初に動かしたいものから設定していきます。

それでは「N」から設定します。
右上のコンディションから「&appear」を選択します。
モーションタブに切り替わったら下記を設定しましょう。

今回は時間は1200、遅延を200から開始しています。

設定ができたら次からの文字の遅延を「200」ずつあけて設定してみてください。

最後の「D」の時間1200、遅延1200で終わっていれば同じになりました。

５−２.棒のアニメーション

まずコンディションを押す前の設定をします。
ボックスタブからモーションタブへ切り替え、右端にある「原点」を左へ変更しましょう。

続いてコンディションで「&appear」を選択し、下記の数値を設定しましょう。

設定ができたら一度再生してみましょう。
思い通りのアニメーションができていたらOKです。

５−３.下の文字のアニメーション

下の文字は上の文字に比べて表示が多いです。
その為上より遅い時間を指定するとゆっくりすぎるので、時間は1000、遅延は1400で開始しています。
ゆっくりめがお好きな方は時間を1200より多くしてみてくださいね。

残りの文字も遅延を「200」ずつ増やして数値を入れましょう。
最後の文字は時間1000、遅延3000なら同じです。

６.文字の箱にアニメーション

次は文字を入れている配置を固定にした箱のアニメーションです。
まずコンディション前に透明度を０にします。
これにより見えていた文字が一旦見えなくなります。

続いてコンディションを「&appear」にし下記の数値を設定しましょう。

これで全ての設定は終了です。
ライブプレビューで確認してみましょう💡

どうでしょう。うまく行っていましたか？

今回は「文字のアニメーション」＋「外箱のアニメーション」という複合をやりました。
イメージにもアニメーションを入れると更に複合になります。

ちょっとした複合アニメーションいかがだったでしょうか。
楽しいと感じ方がいればアニメーションの世界に飛び込んでもいいと思います。
色々頭の中で動かしたものが実際目の前で再現出来るのは、楽しいですよ♪

それでは、また。