今回はシンプルなシェイプアニメーションです。

簡単に見えて地味に大変なモーションを意識していくつか作りました。
本当に細かいところではありますが、時間がかかっているので今回はそこを紹介していきます！

今回の動画

https://www.instagram.com/p/BnYZuPIglDE/?utm_source=ig_embed

モーションを解説

さっそく、このモーションの作り方を紹介いたします。

このモーションは、斜めに動くシェイプと、分断する2つの三角形でできています。

分断する三角形は、四角形を対角線で分けた形ですね。

それぞれ別レイヤーにして、左上の三角形はアンカーポイントを左上の頂点に、

右下の三角形はアンカーポイントを右下の頂点に設定しています。

そして斜めのシェイプが入ってくるタイミングに合わせて、お互いの位置を離しつつスケールを小さくしています。

アンカーポイントを頂点に設定することで、自然に小さくなっていきます。

斜めに動くシェイプは、パスの結合を使って中央の四角形の範囲のみ斜めのシェイプが見えるように設定しています。

斜めのシェイプの長さを変えなくても、位置を動かすだけで伸びて縮んでいくような動きが出来ます。

本当にちょっとしたモーションですが、本当に地味に時間がかかります……

ですが、単純なモーションよりちょっと凝っているように見えるので、嫌がらずに作っていきたいと思います。

今回の紹介は以上です！

ここまでお読みいただきありがとうございました。