この記事の内容
アニメーションは「基点」が命
基点について理解しておこう
「アンカーポイント」はそのレイヤーを動かす時の基点になるポイントです。
上のアニメーション2つは基点が違うものを移動させたものです。ピンクの×で表示した位置が「アンカーポイント」です。
物を移動させるアニメーションだけなら、実はあまり基点は気にならないかもしれません。実際、この2つに動きの違いはないですよね。
回転させてみるとどうでしょうか。
このように、「回転の中心」が違う位置にあるので動きに違いが出ました。
スケールも同様に動きに違いが出ます。
基点がしっかり決まっていないと、動きがフワフワする
アニメーション作りでは「つぶし」という動きを誇張させる表現があります。
動き出しの前や、動き終わりの前にスケールをかけて形をつぶして勢いがあるように見せる手法です。
つぶしなし
つぶしあり（基点がボールの下、地面と接地する位置）
つぶしあり（基点がボールの真ん中）
3つ目の基点が真ん中でつぶしを入れているアニメーションは、接地が浮いているので地面で跳ね返ったというより、ボールが意思を持ってジャンプしている印象になります。
基点がしっかりとしていないと「接地面」がふわふわしてしまりのないアニメーションになってしまいます。
親子付けで基点を作る
他のレイヤーに親子付けをすることによって、アンカーポイントの位置はそのままに・動きの基点を疑似的に変えることができます。
たとえばリング状に配置された星のシェイプが回る動き。
これはリングの真ん中にすべての基点があって、それぞれの星の中心にも基点があります。
ヌルなどを活用すれば、このように複数の基点を作ることが可能です。
親子付け・ヌルについてはこの記事を読んでみてください！
-
-
【親子付け・ヌルの基本】別のレイヤーの動きを真似させる方法
続きを見る
トランスフォームの「アンカーポイント」と「位置」はどう使い分けたらいい？
「アンカーポイント」と「位置」の違い
基点がわかったところで、トランスフォームの「アンカーポイント」と「位置」の違いを紐解いていきましょう。
アンカーポイントに数値を入れたとき
位置に数値を入れたとき
「アンカーポイント」と「位置」、それぞれに同じ数値を入れてアニメーションさせたものです。
ピンクで示した位置が「アンカーポイント（基点）」の位置です。
- 「アンカーポイント」で動かしたときは、基点の位置が変わらずシェイプだけ移動しています。
- 「位置」で動かしたときは、基点の位置ごとシェイプが移動しています。
移動にプラスして、回転やスケールもつけるアニメーションを作る場合は「どんな動きを作りたいのか」「その動きの基点はどこなのか」をしっかりイメージして「アンカーポイント」と「位置」を使い分けてみましょう。
アンカーポイントをドラッグして移動させる方法
アンカーポイントツールを使えば、ドラッグしてアンカーポイントの位置を修正することが出来ます。
アニメーションを付けた後だと、予期せぬ動きになってしまうことが多いので出来るだけアニメーションを付ける前に基点を決めておきましょう。
アンカーポイントを「素材のど真ん中の位置」に戻したい場合、ショートカットが便利です。
レイヤーを選択した状態で
Windows : Ctrl + Alt + Home
MacOS : Command + Option + Home
で位置が自動で真ん中に移動してくれます。
シェイプレイヤーにはもともと複数の基点がある
シェイプレイヤーのトランスフォームの調整は始めのうちは少しややこしく感じるかもしれません。
それは「シェイプレイヤー自体のトランスフォーム情報」と「シェイプのトランスフォーム情報」がついているためです。
お皿の上に乗ったクッキーをイメージしてみましょう。
クッキーはお皿の上で移動が出来るし、お皿もテーブルの上で移動ができます。
シェイプレイヤーは同じようなイメージで、
シェイプはシェイプレイヤーの中で移動が出来、シェイプレイヤーもコンポジションの中で移動が出来ます。
- お皿（シェイプレイヤー）を動かしたい時はシェイプレイヤーのトランスフォーム（図中のA）
- クッキー（シェイプ）を動かしたい時はシェイプのトランスフォーム（図中のB）
を調整するようにしましょう。
まとめ：いいアニメーションを作るには「基点」を意識！
