矢印をしならせる。植物を根元から揺らす。そんな、一枚の素材を柔らかく曲げる動きを作れるのが、ディストーションカテゴリーのCC Bend Itです。回転とは違い、素材そのものの形が曲がります。
今回は縞模様の棒で仕組みを確認し、しなる矢印と、風に揺れる植物へ展開します。Bendの値だけでなく、Start・Endの位置と、範囲外を表示する設定まで比較します。
Start・Endのところが、最初はややこしく感じますが、これを読めば理解できるはず！
この記事の作例プロジェクトと利用条件は、記事の最後の配布欄にまとめています。
完成例：根元を残して、棒を曲げる
右側の棒は位置・回転を動かしていません。同じStart・EndのままBendだけを動かすと、根元からしなる動きになります。縞模様も一緒に曲がるので、単に傾けた場合との違いが分かります。
CC Bend Itの場所と、Start・Endの役割
追加する場所は［エフェクト］→［ディストーション］→［CC Bend It］です。
Startは曲げ始める位置であり、曲げの支点。Endは曲げる範囲の端です。最初にこの2点を素材の根元と先端へ置き、そのあとBendを調整すると整理しやすくなります。点を動かすだけで曲がるわけではなく、Bendが0なら変形しません。
| 項目 | 今回の条件 |
|---|---|
| AE | After Effects 26.5（macOS）／8bpc |
| コンポジション | 1280×720／30fps／6秒 |
| 素材 | 透明背景の1280×720プリコンポジション。中央に幅88・高さ320の棒 |
| 棒の位置 | X=640、上端Y=230、下端Y=550 |
| 適用レイヤー | 素材プリコンポを同じ大きさのコンポへ配置。位置[640,360]・スケール100%・回転0° |
まずはこの設定から
| 設定 | 基本例の値 | 役割 |
|---|---|---|
| Bend | 0 → 40 → -40 → 0 | 曲がる量と方向 |
| Start | [640,550] | 棒の下端。曲げの支点 |
| End | [640,230] | 棒の上端。曲げる範囲の端 |
| Render Prestart | Static | Startより手前を曲げずに表示 |
| Distort | Extended | Endより先も素材の範囲まで表示 |
今回の座標は1280×720の素材に合わせたものです。サイズや配置が違う素材へ、そのまま数値をコピーするのではなく、根元と先端を見て置き直してください。
比較1：Bendで、曲がる向きと量を変える
Bendが0ならまっすぐ。正と負で曲がる向きが変わります。まずは小さな値から増やし、素材の形が読める範囲を探します。大きな値ほどよいわけではなく、細い文字や小さな図形では変形を控える方が見やすい場合もあります。
比較2：Startで、曲がり始める場所を変える
Startを棒の途中へ移すと、そこから先が曲がります。今回はRender PrestartがStaticなので、Startより根元側は曲げずに残る点にも注目してください。Startを動かすとEndまでの距離も変わるため、曲がり方も変わります。
比較3：Endで、曲げる範囲を変える
Bendの数値が同じでも、StartとEndの位置関係で結果は変わります。強く巻き込まれるときはBendだけでなく、2点の距離が素材に対して短すぎないかも確認します。Endを先端へ戻して、基本の状態から調整すると原因を追いやすくなります。
比較4：素材の一部が消えるときは、範囲外の設定を見る
Render Prestart：Startより手前の表示
| 選択肢 | 役割 |
|---|---|
| None | Startより手前を表示しない |
| Static | Startより手前を曲げずに表示 |
| Bend | Startより手前も曲げ続ける |
| Mirror | Startを境に、Start〜End間の曲がった素材を鏡像で表示する設定。今回の比較図では未使用 |
根元を残したいときはStaticが出発点になります。「手前」はStart→Endの向きに対して決まり、常に画面の下側という意味ではありません。今回の縦向きの棒では、Startより下側が該当します。
Distort：Endより先の表示
LegalはEndより先を表示せず、Extendedは素材の範囲まで表示します。Extendedは素材の外側へ無制限に描画領域を広げる設定ではありません。消えている原因がEndの範囲なのか、プリコンポや最終画面の端なのかを分けて確認します。
作り方：棒を左右にしならせる
- 1280×720・30fps・6秒の素材コンポジションを作り、透明背景の中央へ縦長の棒を置きます。基本例は幅88・高さ320、根元[640,550]・先端[640,230]です。
- 同じサイズの別コンポジションに素材コンポを配置し、そのレイヤーへCC Bend Itを適用します。位置・スケール・回転は上の表の条件に揃えます。
- Startを[640,550]、Endを[640,230]へ置きます。Render PrestartをStatic、DistortをExtendedにします。
- Bendを0にして変形前を確認したあと、下の時刻と値でキーフレームを打ちます。
- 動かすキーにイージーイーズをかけ、必要に応じて速度グラフを調整します。配布版は各キーの速度0・影響65%で、曲がった位置で一度止まる往復です。
| 時刻（秒） | Bend |
|---|---|
| 0.0 | 0 |
| 0.5 | 0 |
| 2.0 | 40 |
| 4.0 | -40 |
| 5.5 | 0 |
| 6.0 | 0（末尾の境界キー） |
応用1：しなる矢印で、次の情報へ誘導する
棒を、図形で作った矢印へ置き換えた作例です。右側のNEXTは別レイヤーなので変形しません。戻るたびにBendの絶対値を小さくすると、弾力を感じる動きにできます。物理計算ではなく、キーフレームで作った演出です。
| 設定 | 矢印の値 |
|---|---|
| Start／End | [640,560]／[640,220] |
| Render Prestart／Distort | Static／Extended |
| Bendのキー：秒→値 | 0→0、0.5→0、1.2→50、1.9→-24、2.6→12、3.3→-6、4.0→3、4.7→0、6.0→0 |
| 補間 | 速度0・影響65%で各キーを調整 |
- 透明背景の素材コンポに、矢印の軸と先端を作ります。今回の矢印はAEの図形で構成しています。
- 基本例の素材を矢印へ置き換え、Start・Endを矢印の根元と先端へ調整します。
- Bendへ表のキーを設定し、振れ幅が徐々に小さくなるようにします。添える文字は変形用プリコンポの外へ置きます。
応用2：植物の根元を残して、風に揺らす
茎と葉を一つの素材コンポへまとめ、CC Bend Itをかけています。鉢・地面・説明の文字は変形の外へ置くと、植物だけが風に揺れる場面を作れます。基本例よりBendを小さくし、ゆっくり往復させました。
| 設定 | 植物の値 |
|---|---|
| Start／End | [640,565]／[640,240] |
| Render Prestart／Distort | Static／Extended |
| Bendのキー：秒→値 | 0→0、1.5→14、3.0→0、4.5→-14、6.0→0 |
| 補間 | 速度0・影響65%。中央でもいったん止まる、穏やかな往復 |
- 茎と葉を透明背景の素材コンポへまとめます。鉢は、最終的な見せ方を組むコンポへ別に置きます。
- 素材コンポへCC Bend Itを適用し、Startを茎の根元、Endを植物の上端付近へ置きます。
- Bendを表の値で動かします。鉢との接続がずれるときは、まずStartを確認し、揺れを小さくして調整してください。
つまずきやすいところ
素材の一部が消える・途中で切れる
まずBendを0へ戻し、Start・Endの位置を確認します。そのうえでRender PrestartとDistortを確認してください。点を素材の途中に置いた場合、NoneやLegalでは範囲外が表示されません。最終画面の端で切れる場合は、素材を収めたプリコンポの余白や配置も見直します。
根元まで動く・曲がり方が想定と違う
Startが支点にしたい場所からずれていないか、Render PrestartがBendになっていないかを確認します。同じBendでも2点の距離と向きで見え方が変わるので、素材を差し替えたときはStart・Endを再調整します。
配置を変えたら、設定を追いにくくなった
今回の作例は、素材と変形用コンポを同じ1280×720に揃え、変形するレイヤーは位置・スケール・回転を固定しています。完成した変形用コンポをさらに別コンポへ入れて、その外側で配置やサイズを調整すると、曲げの設定と画面上の配置を分けて管理できます。
どんな素材にも同じ設定で使える？
一つの軸に沿って素材を曲げたいときに使いやすいエフェクトです。関節ごとに違う動きを作る、複数の場所を別々に変形する、といった場合はパペットなど別の方法も検討します。今回はCC Bend It単体で作れる範囲を扱っています。
最初は「2点を置いて、小さなBend」から
Startを根元へ → Endを先端へ → Bendを小さく動かす。この順番で試すと、しなる矢印や揺れるイラストへ広げられます。途中が消えたら、曲がる量を増やす前に、範囲外の表示設定を確認してみてください。
規則的な波を素材全体へ作りたい場合は、ディストーションの公開記事から関連する表現を探せます。
機能の参照：Adobe公式ヘルプ：Cycore plugins。本記事の作例・数値はAfter Effects 26.5（macOS）の8bpcで確認しています。
作例プロジェクトと利用条件
基本例、Bend・Start・End・範囲外の比較、しなる矢印、揺れる植物を、編集可能なAEプロジェクトにまとめました。ZIPを解凍し、「はじめに.txt」から使いたいコンポジションを確認してください。
確認環境：After Effects 26.5（macOS）／8bpc／1280×720・30fps・6秒。外部素材・追加プラグインは不要です。他のAEバージョンやWindowsでは未検証です。
使用フォント：Hiragino Sans W6、Arial Bold。フォント本体は同梱していません。お使いのフォントに置き換えた場合は、文字の位置や改行を確認してください。
利用条件：学習・個人制作での利用と改変は可能です。商用利用は、事前にお問い合わせから個別にご相談ください。
コメント