STUDIOでノーコードでアニメーションを作る②（組み合わせ編）

前篇の基本編で、「WEBサイトをスクロールしてみていくときに出てくるアニメーション」みたいなのはほぼほぼ網羅できるかと思うのですが、ローディングアニメーションを作るとなると「現れる」→「消える」という2段階が必要になります。

前回の設定では基本的に出てきっぱなしだったのですが、これに消えるアニメーションを追加することで順序立てたアニメーションが作成可能になります！

appearの実例（組み合わせ編）

どのように順序立てたアニメーションを実現するかというと、下図のようにボックス毎に「現れる」→「消える」とappearを時間差で再生されるように作ることで、順序だてたアニメーションを連続再生することが可能になります。

⑥スライドイン後、爆散
前項の④スライドインを入れる親ボックスを作ります。親ボックスに遅延と消えるアニメーション（この場合爆散）を使い、④のアニメーション時間1000が終わった後に再生されるようにします。

これ注意点として、appear設定→通常設定という流れで遷移するので、消える場合は
「appear設定で透明度１（非透明）」→「通常設定での透明度0（透明）」というように現れるアニメーションとは逆の設定になることを覚えておいてください。そして同様に消えるときに大きくなる場合は、通常設定にXYスケールを1.5、とします。

レシピ：
・親ボックス-XYスケール1.5、透明度0
（appear設定：XYスケール1.0、透明度1 遅延1200 時間300）

親ボックスappear設定

親ボックス通常設定

⑦テトリス風の動き
消えるだけでなく下に移動した後右に移動する、というような2段階の動きを作ってみます。
特に実用性は思いついていません。笑

どちらに設定してもよいのですが、ここでは最初に開始するアニメーションを子ボックスに、その次のアニメーションを親ボックスに設定しています。

レシピ：
・グレーのボックスー横300px、縦150px、塗り濃いグレー、右下詰め
・親ボックスー塗り透明、縦横auto
（appear：遅延400、時間300、移動X-200）
・子ボックスー塗り白、縦横50px
（appear：時間300、移動Y-100px）

親ボックスのappear設定（右へ200px移動）

子ボックスのappear設定（下へ100px移動）

ちなみに増やすとよりテトリスっぽくなっていきます。
なんか面白い表現ができるかもしれません。笑

組み合わせアニメーションの作り方は以上です。
かなり応用が利くので、色々なアニメーションを作ってみて頂けると嬉しいです！！

続いて、これを駆使してWEBサイト読み込み時のローディングアニメーションを実現します！

基本編はこちら