STUDIO アニメーション実践 サンプル5選！
前記事では、ノーコードWEBサイト作成ツール**「STUDIO」で実装できるアニメーション**の基礎をご紹介しました。
参考➔『STUDIO これだけ覚えればOK！アニメーションの基礎マスター』
本記事では、STUDIOアニメーションの応用編として、ちょっと複雑な動きに挑戦します！
STUDIOの機能のみでは実装できない「動き続ける画像」をGIFを使って組み込むなど、今回も知って得する情報が盛りだくさんです。どんどんご活用ください！！
- 文字が上から降ってくる
- 文字の出現に時間差をつける
- スライドインの合わせ技
- ホバー時画像 ズームイン・アウト
- GIFを使ってアニメーションをループさせる
STUDIOアニメーション１ 文字が上から降ってくる
ひとつ目は、文字が上から下へと降ってくるように現れるアニメーションです。静止画だとイメージしづらいので、ぜひURLをクリックしてサンプルを御覧ください。
サンプルURL：https://implist-animation-sample.studio.site
では、さっそくSTUDIOのデザインエディタでの設定をしていきましょう。
STEP1
アニメーションが完了したときのレイアウトで、要素を配置します。
※今回は一文字ずつアニメーションを設定します。したがって、まず、（背景画像の上に）文字を入れるための親ボックスを設置し、このボックスに一文字ずつテキストを入れて、縦並びを指定しておきます。
STEP2
**「出現時」**のデザイン設定をします。
- アニメーションをつけたい要素をクリックして選択された状態にします。
※まず、最初の一文字目（「伝」）を選択しましょう。 - 画面右上にある**「条件付きスタイル」メニューから「出現時」**を選択します。
- タブを**「モーション」に切り替え、「移動」から出現時の文字位置を設定します。
※「-80px」と設定すると、80px上**から文字が降りてくるように出現します。
STEP３
**「イージング」「時間」「遅延」**の数値を調整します。
STEP３
他の文字にも同様の設定を行います。「遅延」以外は、上記をまったく同じ設定でOKです。一文字ずつ「遅延」を200（0.2秒）ずつ増やし、時間差をつけます。
以上で、「文字が上から降ってくる」アニメーションが完了です！
文字が横から流れてくる
同じ要領で「文字がよこから流れてくる」ような表現も試してみましょう。
基本のSTEPはいつも一緒ですので、ここでは**「出現時」の設定**のみを解説します。
背景画像が現れてから、一呼吸おいて最初の文字が出現します。ゆったりとして間をとりつつも、間延びしないよう**「時間」「遅延」**の数字を調整していきます。
最初の文字だけスライドさせずにふわっとフェードインします。二文字目以降は、X=-60pxつまり60px左からスライドインします。
一文字目がふわっと表示され終わる頃に、二文字目がフェードインし始める…その絶妙なタイミングが上記の数字になります。
ご自身で数値を色々いじって、表示のタイミングやズレを体感的にとらえましょう！
なお、最後の「ー スティーブ・ジョブズ ー」は、以下のように設定します。これより上のメッセージが全て出現してから、ワンテンポ遅れて出現するように**「遅延」を調整します。さらに、出現にかかる「時間」**も多めにとって、余裕をもったデザインにします。
STUDIOアニメーション２ 文字の出現に時間差をつける
前章では、文字をゆったりとフェードインさせることで、「心にゆとりのある印象を与えるデザイン」を演出しました。
それに対して、今回は、文字をパッパッとテンポよく出現させ、ワクワク感を出してみましょう。
サンプルURL：https://implist-animation-sample.studio.site
出現時間を均等にしてもOKですが、今回はもう一工夫してみましょう。強調したい文字の出現時間を多めにとって、「重み」を出します。
※今回は、見本として（目で追いやすいように）ゆっくりめに設定しています。実際は、間延びしないように、気持ち早めに動かすとよいでしょう。
出現時の設定は、以下のようになります。
最初の1文字目（「2023」の「2」）は、背景画像が現れてから一呼吸おいてパッと現れるように設定します。この「一呼吸おく」演出が「遅延 500」です。そして「ふわっと」ではなく、「パッと」現れるようにするために、「時間 0」とします。
2文字目は、1文字目に「200（0.2秒）遅延」して現れます。この調子で、「2」「0」「2」「3」と遅延時間を200ずつプラスしていきます（「3」は「遅延 1100」となります）。
そして、「2023」の出現から少し”溜め”て、「12.」「31.」を表示します。「12.」は「遅延 1900」、「31.」は「遅延 2700」です。さらに、「始」「動」の文字は、上記よりさらに”溜め”て、それぞれ「（始）遅延 3700」「（動）遅延 4700」で現れます。
文字の出現に時間差をつける☆別バージョン
こちらは、文字がその行のベースラインから上に向かって出現するパターンです。**「出現時」**の設定は、以下のようになります。
「2023.12.31.」が入った文字ボックスの設定です。
「始動」が入った文字ボックスの設定です。
「移動」の数値は、Y方向に何pxの位置から出現させるかを表します（Yは上下、Xは左右）。Y: 100pxであれば、出現時にはこのボックスが100px下にあり、「時間 600（0.6秒）」かけて通常位置に移動する、と設定したことになります。
日付の文字より、「始動」の方が文字サイズが大きいので、それに合わせて移動開始位置も下にずらしてあります。
ページを開いた瞬間に間髪入れずに文字が移動すると、ちょっと忙しい印象になるので、日付は「遅延 800（表示後0.8秒後にアニメーション開始）」とします。「始動」は日付が出現してからさらにワンテンポ遅れて出現するような時間設定です。
STUDIOアニメーション３ スライドインの合わせ技
サンプルURL：https://implist-animation-sample.studio.site
**「出現時」**の白色ラインの設定です。画面を開いてから1秒後（「遅延 1000」）に左から右へとスライドインします（出現時の位置：X方向に-720px）。
**「出現時」**の文字の設定です。
「IMPLIST」が下から上へ、「SUMER FESTIVAL」が下から上へと交差するように現れます。**「イージング」によって「現れ方（速度の緩急）」**を設定できるので、文字がサッと現れたあとは、ブレーキがかかったようにゆっくりと定位置に収まっていく…という動きを演出できます。
STUDIOアニメーション４ ホバー時画像 ズームイン・アウト
STUDIOアニメーションの基礎編では、ホバー時に画像をちょっと大きくする技をご紹介しました。参考➔『STUDIO これだけ覚えればOK！アニメーションの基礎マスター』ULR
今回は、その応用編です。ホバーすると、画像の大枠のサイズは変わりませんが、中の画像のみが拡大され、ズームインされたように見えます。
さっそく作成方法を解説します。
まず、画像の親要素となるボックスを設置します。そして、設置したボックス内に画像ボックスを入れます。このとき、画像ボックスの縦幅を100%、横幅を100%とし、親ボックスにぴったり収まるようにします。
次に、画像のみを選択して**「ホバー」**の設定を行います。この時、誤って親要素のボックスを選択しないように注意しましょう！
レイヤータブを開いて、確実に画像のみを選択することをオススメします。
画像に対して、ホバー時のスケールをX=1.5, Y=1.5（縦横方向に1.5倍）に設定しました。
ここで、いったんホバーに関する設定を閉じ（対象の画像以外のどこか一点をクリックすればOKです）ます。
そして、今度は画像を入れた親ボックスを選択します。そして、**「はみ出し」から「切り取り」**を指定します。こうすると、子要素が親要素からはみ出した部分は「切り取る（=非表示）」という設定になります。
これで、ホバーした際、中の画像が大きくなっても、親要素によってはみ出した部分がカットされるため、全体としては元のサイズをキープします。つまり、表示される画像のサイズは変わらずにズームインされたような見た目となるわけです。
ホバー時に画像がズームアウトされる
では逆に、ホバー時に画像がズームアウトされる場合はどうすればよいでしょうか？
最初のステップは同じで、まず、画像の親要素となるボックスを設定します。そして、このボックスの中央に画像を配置します。ですが、この時、画像ボックスの縦幅、横幅を100%以上にします（今回は画像のバランスを考えて120%にしてあります）。
次に、親ボックスを選択して、**「はみ出し」→「切り取り」**を設定します。
このうえで、画像のみを選択して**「ホバー」時**の設定を行います。スケールをX, Yともに0.9としましたので、ホバーの際に画像は0.9倍（90%）の大きさになります。
この90%とは、**元の表示サイズの90%という意味です。今回、元画像はあらかじめ親要素からはみ出す120%**としてあったので、それを90%に縮小しても親ボックスに隙間ができることなく、ズームアウトする見た目を演出できます。
STUDIOアニメーション５ GIFを使ってアニメーションをループさせる
STUDIOのアニメーション機能には、「無限に動き続ける」という設定がありません。しかし、GIFを画像として表示させることは可能です。つまり、GIFで表現できる範囲であれば「動き続ける」 画像の設置ができるのです。
今回は、試しにこちらのサイトを使って（無料）GIF画像を作成した例をご紹介します。
（『アニメーションGIF作成』 → https://ao-system.net/gifanima/）
このサイトでは、静止画像をドラッグ＆ドロップで（最大50枚）、パラパラ漫画の感覚でアニメーションを作成することができます。「リピート回数」に「０」を指定すると、無限ループします。
GIF作成に用いた画像
※「透過させる色」として白を指定すると、背景のみならずパンダの体の白色部分も透過してしまうため、pthosohopで薄く色付けしてあります。
作成したGIF画像
GIF画像は、動きがあってもサイズが大きくならないところが良いところです。この走るパンダのGIFはたったの20KBです（なお、元画像は500×500pxに縮小したバージョンで約30KBです）。
また、背景としてこのような画像を作ることもできます。これらは、そのままSTUDIOに「画像」としてアップロードして使うことができます。
このサイトでできるGIF画像は「画像を指定した時間で切り替える」ものなので、流れるようなスムーズな動きは難しいといえます。
写真中で「動き」を演出したい場合は、「PhotoDirector」などがオススメです（有料）。このソフトを使うことで、水面が揺れ続けたり、花びらが散り続けるようなGIF画像を作ることが可能です。
参考PhotoDirector →https://jp.cyberlink.com/products/photodirector-photo-editing-software-365/features%5Fja%5FJP.html
