After Effectsのモーションを整理した「モーション周期表」を再現する過程で学んだ内容を、初心者向けにまとめます。

本記事では、その中でも横長素材を丸めて回す動きを出すのに使う「極座標(Polar Coordinates)」に絞って解説します。

この記事でできること

「横長素材を円に変換するやり方」がわかる
「変換した円を回転させる動き」を作れる
✅「極座標(Polar Coordinates)」の操作での「つまづきポイント」がわかる

極座標(Polar Coordinates)とは?

出典:Adobe After Effects(© Adobe Inc.)

結論:横長の素材(帯・模様など)を、極座標変換で円(リング)に丸めるエフェクト。
用途:アプリでよく見るローディング(くるくる回るリング)を作るのに便利です。

 

「円形モーション」を極座標を使って再現する

円形モーションを作るための下準備

確認するポイント

✅コンポを作成(Ctrl+N):1920×1080/30fps/5秒

✅レイヤーを作成:「レイヤー」⇒「新規」⇒「シェイプレイヤー」
※横長の模様(帯・ストライプなど)の素材になります

✅背景レイヤー(BG)を作成:「レイヤー」⇒「新規」⇒「平面」
※他のレイヤーをより見やすくしたい場合に利用します

例)ノイズをかける(ノイズ量は2~6%が目安):「エフェクト」⇒「ノイズ&グレイン」⇒「ノイズ」

✅エフェクト「極座標」の追加:「エフェクト」⇒「ディストーション」⇒「極座標」

✅円形に変換する設定:

変換の種類(Type)を「長方形から極座標へ(Rect to Polar)にする

※素材を円形に丸めたいときは、この設定が基本です

プリコンポーズしてから極座標を適用するのがおすすめ

素材レイヤーをプリコンポーズ(例:Pattern_PREに名前を変更)→そのPattern_PREに極座標を適用すると、調整がしやすくなります。

✅つなぎ目対策で覚えておくと便利なモーション:「Motion Tile」「Offset」
※円にしたときに「つなぎ目」が目立つ場合の保険として組み合わせることもできます

 

極座標を再現しながら円形モーションを作る

①横長図形(STRIP)を作る

・「レイヤー」>「新規」>「平面」(例:白)
・横長に見せたいので、「マスクで帯」を作る(例:高さ200pxくらいの横帯)
帯の高さ=リングの太さになります。
・名前:「STRIP」に変更する

②プリコンポーズ化する

・STRIPを選択→「レイヤー」>「プリコンポーズ」
・名前:STRIP_preに変更(移動する属性:すべて
※STRIP_preの中で、横帯が画面幅いっぱいに伸びている状態にしておくと安定します。

③極座標を適用する

・メインコンポで「STRIP_pre」を選択
・「エフェクト」>「ディストーション」>「極座標」
・変換の種類:長方形から極座標へ(Rect to Polar)
・補間(Interpolation):100%を目安に設定

④円にした素材を回転させる

・「STRIP_pre」の「回転(Rotation)」にキーフレーム(例:0秒=0°、5秒=360°)
・「右クリック」→「キーフレーム補助」>「イージーイーズ(F9)」

「回転」のレイヤーに以下のエクスプレッション(式)を入力することで、自動で素材を回転させられます。

このままコピペして下さい(コピーすると自動で半角になります)
time*60;

※「time*X」:X=360°÷時間
たとえば、5秒で1周させたい場合は、「0秒時点=0°/5秒時点=360°」となれば良いので、360°を5(秒)で割ってでた答え(=72)をXに入力します。

 

(補足)継ぎ目を目立たなくしたい場合

継ぎ目が気になる場合は、極座標をかける前にSTRIP_pre側へ「Motion Tile」を追加する

出力幅/出力高さを増やしてから極座標に変換すると、継ぎ目が安定しやすいです。


極座標の「調整ポイント」と「トラブル対処法」

極座標の調整ポイント

下記の3つだけ触れば、動きの調整は可能です。

変換の種類(Type)長方形から極座標へ(Rect to Polar)
→横長素材を「円(リング)」にする基本設定です。
※逆にすると、円形とは異なる変形をします。

補間(Interpolation)「80〜100%」が目安
→円への丸まり具合を調整する設定です。

帯の高さ(STRIPの太さ)「80〜300px」が目安
→リングの太さに直結します。

極座標のトラブル対処法

1.中心がズレる/楕円っぽくなる

原因

レイヤーのアンカーポイント位置が中心になっていない

試したい対処法

◇レイヤーの「アンカーポイント」と「位置」画面中央

→短縮キーが使えると便利です。

・アンカーポイントを中央へ:Ctrl+Home

・画面中央に整列:Ctrl+Alt+Home

2.継ぎ目(つなぎ目)が見える

原因

横素材が左右でつながっていない(端の色差/ループ不成立)

試したい対処法

◇STRIP_pre 内で左右端が同じ見た目になる模様にする。

◇難しければMotion TileOffsetで馴染ませる

(短縮キー推奨)

3.ギザギザ/粗い(画質が荒れる)

原因

素材の解像度不足、または拡大しすぎ

試したい対処法

STRIP_pre を大きめに作る(幅を長く)→プレビュー解像度をフルで確認。必要なら軽くぼかしで馴染ませる

おわりに

極座標(Polar Coordinates)は、横長の素材(帯・模様)を「円(リング)」に変換できる便利なエフェクトです。

まずはシンプルな長方形(横長の帯)を作り、極座標で円形に変換して回転させるところから試してみてください。


【記事の制作裏話はこちら(note:Hiromuの探求部屋)】

制作中に気づいたポイントや、つまずきやすい部分の補足もまとめています。

時間があるときに、よければ覗いてみてください。