文字が少しずつ傾き、カードがカクカク集まる。posterizeTime()を使うと、位置や回転の更新を間引いて、コマ撮り風の動きを作れます。レトロなタイトルや、切り紙風のモーショングラフィックスに使える方法です。
今回は、同じ移動の30・12・6fps相当の比較から、タイトルとコラージュへ進みます。「ポスタリゼーション時間」エフェクトとの違いは何か、どちらを使えばよいかも、同じ動きの作例で見比べます。
この記事で使用したAEプロジェクトを無料ダウンロードできます。ダウンロードは記事の最後から。
まずは比較：同じ移動を30・12・6fps相当で見る
数値を下げるほど、同じ位置を保持する時間が長くなり、段階的な移動に見えます。移動時間を遅くしているわけではありません。動画の書き出し自体は30fpsのままで、その中に同じ位置のフレームが増えます。
| 指定 | 今回の30fpsコンポでの見え方 |
|---|---|
| 式なし | 毎フレーム、位置が変わる |
| posterizeTime(12) | 12fps相当で更新。30÷12が整数でないため、表示上の保持間隔は2・3フレームに分かれる |
| posterizeTime(6) | 6fps相当で更新。5フレームずつ保持する |
12fpsを均等な2コマ打ちにしたい場合は、24fpsコンポと組み合わせる方法があります。今回は比較のため30fpsコンポで統一しています。低い数値ほどよいというものではなく、6fpsははっきりしたコマ撮り感、12fpsは少し細かい刻みとして見比べてください。
基本：キーフレームの動きをコマ落ちさせる
| 項目 | 今回の設定 |
|---|---|
| 環境 | After Effects 26.5×89／JavaScriptエクスプレッションエンジン／8bpc |
| コンポジション | 1280×720／30fps／6秒 |
| 基本の丸 | 直径34px／2D／親なし |
| 位置のキー | 0・0.5秒にx＝230、5.5・6秒にx＝1110。yは行ごとに固定。リニア |
| モーションブラー | 今回の作例はオフ。保持と更新の違いを見やすくするため |
- 丸いシェイプレイヤーを作り、位置のキーフレームで左右へ動かします。
- そのレイヤーの「位置」のストップウォッチをOption／Alt＋クリックします。
- 次の2行を貼り付けて再生します。
- 6を12へ変え、更新の刻みがどう変わるか比較します。
コピー用コード1：既存のキーフレームを6fps相当にする
posterizeTime(6);
value;1行目は、この式を評価する頻度を6fps相当に指定します。2行目のvalueは、式を付ける前のプロパティ値を返します。先に作ったキーフレームを残したまま、その値の更新を間引く書き方です。
posterizeTime(6);の1行だけでは、位置へ返す値がありません。value;まで含めて貼り付けます。回転にも同じ2行を使えますが、位置へ貼っただけでは回転の更新頻度は変わりません。
ポスタリゼーション時間との使い分け
今回のAEでは、シェイプレイヤーへ「ポスタリゼーション時間」を直接掛けた場合も、位置と回転の両方がコマ落ちしました。「位置のキーには効かない」と決めつけず、実際の描画結果で使い分けます。
| 方法 | この作例で変わるところ | 向いている場面 |
|---|---|---|
| エフェクトを直接適用 | 位置と回転がまとめて6fps相当に保持される | レイヤーの動きをまとめてコマ落ちさせたい |
| 位置だけにposterizeTime() | 位置は6fps相当、回転は30fpsのまま | 位置・回転・不透明度などの更新を個別に分けたい |
| プリコンポへエフェクト | 内部の位置と回転をまとめて6fps相当にする | 文字・図形など複数レイヤーを、ひとまとまりの映像として処理したい |
エフェクトは「エフェクト」→「時間」→「ポスタリゼーション時間」を追加し、フレームレートを6に設定しています。プリコンポ版では、動く丸と回転のキーを内側へ入れ、外側のプリコンポレイヤーへ同じエフェクトを掛けています。
全体をコマ落ちさせたいだけなら、エフェクトで十分です。式が便利なのは、動きの一部分だけを変えたい場合や、すでに使っているwiggleなどの計算と組み合わせたい場合です。プリコンポーズするかどうかは、まとめたいレイヤーの範囲で判断します。
実践1：位置と回転だけ、レトロなタイトルにする
- 文字と紙風の背景を作り、800×300pxのプリコンポへまとめます。今回はWEEKEND／STUDIOの2行タイトルです。
- タイトルのプリコンポレイヤーを、1280×720のコンポジションへ配置。アンカーをプリコンポの中心にして、位置を［640, 410］、回転を−2度にします。
- 位置へ次のコード2、回転へコード3を貼ります。
- 不透明度には式を貼らず、0秒0％→0.7秒100％→5.3秒100％→6秒0％のリニアキーを作ります。
- 背面に暖色の平面や、ゆっくり横切る丸を追加します。タイトルとは別レイヤーにし、コマ落ちの式を付けません。
コピー用コード2：位置を小刻みに揺らす
posterizeTime(6);
wiggle(2, 10);wiggle(2, 10)は、1秒あたりの揺れの頻度が2、振幅が10pxの設定です。その計算を6fps相当で更新するので、滑らかな揺れが段階的な動きになります。6は揺れの速さ、2はコマ数という意味ではありません。
コピー用コード3：回転を小刻みに揺らす
posterizeTime(6);
wiggle(2, 2);回転側の振幅は2度です。位置と回転はそれぞれのプロパティに貼り付けます。不透明度へは貼らないので、タイトルの揺れが止まって見える間も、フェードは毎フレーム進みます。
| 項目 | 設定 |
|---|---|
| 位置 | 基準［640, 410］／posterizeTime(6)＋wiggle(2, 10) |
| 回転 | 基準−2度／posterizeTime(6)＋wiggle(2, 2) |
| 不透明度 | 0→100→100→0％のリニアキー。式なし |
| 背面の丸 | 位置［180＋time×140, 270］。コマ落ちの式なし |
| 装飾 | クリーム色の紙、くすんだ緑と赤、固定の小さな粒 |
| 編集先 | 03_RETRO_TITLE。文字と紙はTITLE_ART内で編集 |
紙の粒や暖かい色は、別に作った装飾です。posterizeTime()が画質を古くしたり、フィルムの粒を追加したりするわけではありません。動きの刻みと、色・紙・書体を組み合わせてレトロな印象に寄せています。
実践2：切り紙風カードが、カクカク集まるコラージュ
- 紙色の四角、山や太陽の図形、短い文字をまとめた280×230pxのカードを3枚作ります。各カードをプリコンポーズします。
- カードを左・下・右の画面外へ置き、位置と回転のキーフレームで集まる動きを作ります。
- 到着位置を［330, 400］／［640, 390］／［950, 410］、到着時の回転を−8／5／−5度にします。
- 移動の始点と到着キーへイーズを付けます。配布例は影響65％です。
- 各カードの位置と回転の両方へ、コード1の2行を貼ります。再生し、30fpsの滑らかな動きからコマ撮り風へ変わることを確認します。
| カード | 移動開始→到着 | 出発位置 | 到着位置／回転 |
|---|---|---|---|
| SLOW | 0.3→1.8秒 | ［−200, 230］ | ［330, 400］／−8度 |
| LOOK | 0.55→2.05秒 | ［640, 920］ | ［640, 390］／5度 |
| MAKE | 0.8→2.3秒 | ［1490, 200］ | ［950, 410］／−5度 |
到着後は4.8秒まで位置を保ち、6秒までに20pxだけ上へ移動。回転は到着から6秒までに3度だけ追加しています。出発時の回転は各到着角度から−25度です。
イーズは移動の加速・減速、posterizeTimeは更新の刻みを担当します。元のイーズを消してホールドキーへ置き換えているわけではありません。まず滑らかな動きを完成させ、式をオン／オフして印象を比べると調整しやすくなります。
つまずきやすいところ
| 症状・疑問 | 確認すること |
|---|---|
| 式を入れても動かない | valueは既存の値を返すだけ。先に位置や回転のキーを作るか、wiggleなど動く式と組み合わせる |
| 式のエラーが出る | posterizeTimeだけで終わらず、valueやwiggleまで含めて貼る。末尾のセミコロンも確認 |
| 回転が滑らかなまま | 位置だけへ式を貼った場合は正常。回転も変えるなら回転へ別に貼る |
| フェードも段階的にしたい | 不透明度にも同じ2行を貼る。滑らかにしたいなら貼らない |
| 12fpsが均等な2コマにならない | 30fpsに12fpsは割り切れない。均等な2コマ打ちなら24fpsと12fpsの組み合わせを検討 |
| ブレが強く、刻みが見えにくい | モーションブラーをオフにして比較する |
| エフェクトと見た目が同じ | 対象の動きを全部まとめて変えたいなら、エフェクトを選んでよい |
| レトロな質感にならない | 式が変えるのは更新の刻み。色や書体、紙や粒の装飾は別に作る |
| fpsを下げると揺れの軌跡が違って見える | 同じ動きを細かく追わず、飛び飛びの時刻で拾うため。更新頻度とwiggleの頻度・振幅を別々に調整する |
作例プロジェクトをダウンロード
30・12・6fps比較、エフェクトとの比較、レトロなタイトル、切り紙風カードと比較画像用コンポジションを含む編集可能なプロジェクトです。
| 項目 | 内容 |
|---|---|
| ファイル | pas-posterizetime-v1.0.zip／99.8KB／v1.0 |
| 内容 | 編集可能なAEP・はじめに.txt・コピー用コード |
| AE | 26.5×89／JavaScript／1280×720／30fps／6秒 |
| フォント | Hiragino Sans W6・Arial Bold。本体は未同梱。未導入の場合は置換してください |
| 素材 | AE内の図形・文字のみ。追加プラグイン・外部素材不要 |
| 利用条件 | 学習・個人制作で利用と改変可。商用利用は個別相談 |
商用利用のご相談はお問い合わせへ。ほかの動きはAEエクスプレッション集から探せます。
コメント