![](https://seguimiii.com/wp-content/uploads/2020/08/addsizeandline202008_001.png)
今回は、サイズとライン幅を使って図形の円を動かしてみたいと思います。
動画サイズは1280×720を前提に作業しています。
円とサイズ
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_002.png)
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_003.png)
円のサイズを画面いっぱいに大きくしてみます。
拡大率でも大きくすることはできますが、サイズの方が綺麗に拡大できます。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_004.png)
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_005.png)
トラックバーでは、1000までしかいきませんが、数値の上にカーソルを置いて右方向へドラッグすると1000を超えて大きくなります。
また、数値をクリックして直接入力することもできます。
デフォルトのライン幅だと、画面いっぱいにしたとき中央に穴が開いてしまいます。ライン幅をいじって穴を埋めます。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_006.gif)
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_009.png)
円のサイズを0→1480と画面いっぱいに大きくした動きです。
余裕がある場合は、サイズの移動をイージング(トラックバー版)で緩急をつけるとよりいい感じの動きになります。
ちなみに、ここではイージングの8番を使っています。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_015.png)
サイズを大きくするだけの動きですが、円の座標を動かすだけで随分景色が変わります。
主に画面の端に座標を移動させて、先ほどと同じようにサイズを画面いっぱいに広げます。四つ角はサイズ3000、ライン幅1500くらい大きな数値になりました。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_001.gif)
こうした動きはシーンチェンジなどで利用されます。
円とライン幅
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_006.png)
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_007.png)
サイズ400の円のライン幅を100に設定してみました。
ライン幅を移動させてみます。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_007.gif)
ライン幅をいじると円の内側から穴が広がる感じになります。円の外側の位置は変わりません。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_008.gif)
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_011.png)
サイズの拡大と、ライン幅の移動を組み合わせたもの。
円のサイズは400、500、600の三種類。
ライン幅は100→1、逆モーションは1→100となっています。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_009.gif)
最初のライン幅を変えることで動きに違いが出せます。
ライン幅を小さくするほど早くから輪っかの状態になります。
使用例
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_004.gif)
画面が遷移する動きに円のサイズ拡大を使用しています。
円を”上のオブジェクトでクリッピング”してスマホ画面からはみ出さないようにしています。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_002.gif)
時間差で円の線が細くなってシーンチェンジします。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_012.png)
円はこんな感じで組み合わされています。隙間ができないように目視で確認することが大事です。確認するときは、すべて同じ色にすると隙間を見つけやすいです。
円にマスクをかけて輪を作ります。円(図形)の方のサイズを小さくすると内側は固定で外側から細くなっていきます。真ん中だけはマスクなしでサイズを小さくします。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_003.gif)
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_013.png)
ボタンの座標を中心として円を広げていきます。写真が出てくるシーンは、円それぞれに写真を”上のオブジェクトでクリッピング”します。
左右対称なので、最初に作ったモーションをコピペして座標を変えれば作業も効率的です。
![](https://seguimiii.com/wp-content/uploads/2019/07/circlemotion201907_005.gif)
モーショングラフィックスでも円のサイズとライン幅を使った動きが役立ちます。
いかがだったでしょうか。
円は、サイズとライン幅を組み合わせると動きが出ます。また、座標を中央以外に設定するだけでも動きが出ます。”上のオブジェクトでクリッピング”と一緒に使うのもありですね。
円の使い方の参考に是非試してみてください。