皆さんはノーコードWeb制作ツール「STUDIO」をご存知でしょうか。
この記事では、これからSTUDIOで制作してみようと思っている方やすでにやられている方に向けて、STUDIOを使ったアニメーションの応用テクニックをご紹介しています。
完成イメージはこちら↓
https://preview.studio.site/live/65qmJGdJaV/4
アニメーション制作手順
それではさっそくはやっていきましょう！
レイヤー構造の確認
今回制作するアニメーションのレイヤー構造の中身はこのようになっています。
ボックスの配置
まずはボックスを配置していきます。
エディタ画面左側のエレメンツパネルからボックスをドラッグ&ドロップします。
画像ボックスの配置
続いて同じくエレメンツパネルから画像ボックスを、先ほど配置したボックスの中に配置します。
画像を3枚配置
先ほど配置した画像ボックスに画像を設定し、それを複製して3枚の画像を配置させます。
画像の向きを変更
縦並びになっていた画像を横並びに変更します。
今回は中央の画像の後ろに隠れた2枚の画像を左右に広がるようにするため、中央の画像の「重ね順を」「1」としておきます。
左右の画像のマージンを調整
画像が左右に広がる際の左右バランスをとるために、左右の画像の上部にマージンをとります。
上部のマージンを「80」とします。
左右の画像に傾きを設定する
画像を広げた時に扇のようにアーチを描いて広がるようにしたいので、左右の画像に傾きを設定していきます。
左の画像：「モーション」→「回転」の数値を「-15deg」
右の画像：「モーション」→「回転」の数値を「15deg」
中央の画像にアニメーションを設定
アニメーション開始時に中央の画像を透明にしておくための設定をしていきます。
①左の画像を選択した状態で、エディタ画面右上の「条件付きスタイル」上部の「なし」をクリック。
②アニメーション項目の「出現時」をクリック。
③エディタ画面上部にある「ボックス」「画像」「モーション」から中央の「モーション」をクリック。
④モーションの選択項目にある透明度を「0」にします。
⑤中央の画像以外の箇所でクリックをして、出現時アニメーションの設定を完了させます。
左右の画像にアニメーションを設定
左右の画像にも出現時のアニメーション設定を行っていきます。
①「透明度：0」「イージング：」「時間：1000」「遅延：100」「移動：X330 Y-40」「回転：0」とします。
②次に右の画像を選択して、左の画像同様にアニメーション設定を行います。
③移動項目のみ「移動：X−330 Y-40」として、X軸を左の画像の反対の数値にしておきます。
動作確認
以上で3枚の画像を中央から左右に広がるように表示させるアニメーションの設定は終わりです。
最後にエディタ画面の右上にある「プレビュー」ボタンからアニメーションを確認して問題がなければ完了となります。
気になった方はぜひトライしてみてください！
最後まで読んでいただきありがとうございました。
