描画 · 約12分
線を描くTrim Paths
図形の輪郭が伸びる基本を作り、装飾線や見出し枠に応用する。
（AE実機レンダーではありません）
動画を再生できませんでした。MP4リンクをお試しください。
動きを減らす設定が有効です。見本の再生は任意です。
見本で見るポイント
幅4px程度のcyanの折れ線またはゆるい曲線。SVG stroke-dasharray/dashoffsetで0〜1秒に0→100%描画。1〜2.5秒保持、2.5〜3.5秒で始点側から消し、最後は空白。
- 0秒：始点の小さな印だけ。
- 0.5秒：左から半分まで描画。
- 1秒：全線が完成。
- 3秒：左半分が消えている。
見本はブラウザーで描いた仕組みのイメージです。AE実機の結果ではありません。色分けや、見本を繰り返し見るための反復・退出を加える場合があります。これらは本文の手順外で、同じ操作だけでは自動的に反復・退出しません。本文の成功条件を目標に練習してください。
正確さについて：動きの考え方を説明する模式図。AEのレンダー、乱数、粒子数、発光・ぼかしの画素値の再現ではない。 識別用の色分け、見せ方用の反復・退出を含む場合があり、本文の手順との完全一致は意図していない。
先に練習しておくこと
- シェイプレイヤー
- キーフレーム
作業の準備
新規コンポジション：1920×1080、正方形ピクセル、30fps、8秒。開始タイムコード0:00:00:00。最下段にコンポサイズの濃紺の平面BGを作る。特記がなければ全レイヤーは0秒から8秒まで、2Dのまま。
設定の目安
End
0秒0% → 1秒100%
見える線の終点
変えてみる：キーの間隔で描く速さを変える。
Start
0%固定
見える線の始点
変えてみる：後から動かすと線を消せる。
Stroke Width
8px
線の太さ
変えてみる：4と12を比較。
BUILD THE EFFECT
操作手順
- 01
0秒で全レイヤーの選択を解除。ペンツールを選び、塗りなし、線を水色、線幅8pxにする。画面左の(400,600)付近→中央の(960,450)付近→右の(1520,600)付近をクリックし、開いた折れ線を作る。
- 02
新しいシェイプレイヤーをLINEと命名。もしBGに「マスク」ができた場合は取り消し、全選択解除して描き直す。
- 03
タイムラインでLINE > Contents（コンテンツ）の追加 / Addメニューから「パスのトリミング / Trim Paths」を選ぶ。Effects & Presetsのエフェクト検索には出ない。
- 04
Trim PathsのStart=0%、End=0%、Offset=0°。0秒でEndのストップウォッチを押す。
- 05
1秒へ移動してEnd=100%。線が最後まで描かれる。2秒まではEnd=100%を保つ。
- 06
キーを選びF9、または右クリック > Keyframe Assistant > Easy Easeで速度に緩急を付ける。まず線形の動きと比べてから採用する。
MAKE IT YOURS
表現を変えてみる
同じ仕組みで歌詞の下線を作り、全文が出た直後に線が完成するようにキーを合わせる。
うまくいかないとき
- 塗られた三角形になる：塗りをなしにして線を有効にする。
- 線が全部消えた：StartとEndが同じ値のままになっていないか確認。
- 一部しか動かない：Trim Pathsが対象のパスと同じContentsグループ内で、パスより下にあるか確認。
公式の参考資料
メニュー名や画面の差異は、使っているバージョンの公式ヘルプでも確認できます。