図形の使い方
今回は、図形を使った動きを紹介したいと思います。
テーマは、分割して動かすです。
サイズ300の四角形です。
これを分割します。
サイズ100の四角形を並べて、サイズ300の四角形にしました。
・XY移動
画面の外から移動してきて、定位置で静止、
再び画面の外へ移動します。
上下左右に、動きが重ならないように注意します。
移動はイージング等で緩急をつけるとよくなります。
・拡大率
左下から右上に移動するように時間差をつけました。
拡大率は0→100の直線移動です。
消えるときは100→0へ。
中心を、オブジェクトではなく、画面の真ん中に置くと
また違った感じになります。
オブジェクトを拡張描画にして、中心XYで位置を調整します。
・透明度
透明度を100→0、直線移動。
・回転
これはちょっと手間が要ります。
中心を四角形の角に据えて、転がします。
消えるときは、中心が変わるので別オブジェクトになります。
前後関係も注意が必要です。
四角形の右下の角に中心をもってきます。
中心を動かすと、オブジェクトの位置も動いてしまうので、
基本効果の座標を使って元の位置に戻しています。
以上が図形を使った基本的な動きです。
ひとつのオブジェクトを複数のオブジェクトに分割することで、
組み合わせが生まれます。
例えば、四角形もさらに分割すると、三角形で作ることができます。
分割してできたオブジェクトをどう動かすかによって、
さらに組み合わせが生まれます。
移動と透明度、拡大縮小と回転など、
基本の動きを組み合わせます。
ここからは応用です。
ごちうさMADでのチノちゃん。
移動と透明度の組み合わせです。
6分割にして、上下交互に移動。
併せて出現、消失の際に透明度も使っています。
こちらは拡大率。
大小さまざまな円が拡大して、マスクされた四角形を埋め尽くします。
ひし形と透明度を使った演出。
敷き詰められたひし形が、波紋のように広がっていきます。
レイアウトもひし形を使って、
それぞれのシーンをちりばめています。
いかがだったでしょうか。
一見、複雑に見える動きも、基本的な動きの組み合わせだったりします。
他にもテキストなど様々なオブジェクトを分割して、
動きの組み合わせを作ってみてください。
併せてこちらもどうぞ。
→いくつかのパーツに分かれたテキストの演出例
→同じ色は繋がる
→六角形を使ったモーション
デザインノート No.82: 最新デザインの表現と思考のプロセスを追う
CGWORLD (シージーワールド) 2018年 12月号
+DESIGNING VOLUME 46
ブレーン2019年1月号 読者が選ぶブレーン広告グランプリ2018