Text Animate By Glyph(文字アニメーション)

`TextLayout` の各文字に、ずらし付きの移動・拡大縮小・透明度・波・バウンスを適用するノード

中級
Since P00

入力ポート

Layout(レイアウト)

1文字単位でアニメーションする `TextLayout`

`TextLayout`

出力ポート

Layout(レイアウト)

1文字ごとの transform / opacity を更新した `TextLayout`

`TextLayout`

パラメータ

名前デフォルト説明
Progress進行度`Float``1.0`対象文字範囲に対する正規化進行度
First Character先頭文字`Int``0`対象に含める先頭文字番号。`0 = 1文字目`
Last Character末尾文字`Int``4096`対象に含める末尾文字番号。入力 `TextLayout` に合わせて上限が自動調整される
Reverse逆順`Bool``false`対象文字範囲を末尾から先頭へ向かって処理する
Per-Character Delay1文字遅延`Float``0.0`各文字に順番に追加する正規化遅延量
Start X Offset開始Xオフセット`Float``0.0`開始時に適用し、進行に応じて 0 へ戻る横オフセット
Start Y Offset開始Yオフセット`Float``0.0`開始時に適用し、進行に応じて 0 へ戻る縦オフセット
Start Scale開始スケール`Float``1.0`開始時に適用し、進行に応じて 1.0 へ戻るスケール
Start Opacity開始不透明度`Float``1.0`開始時に適用し、進行に応じて 1.0 へ戻る不透明度
Wave Height波の高さ`Float``0.0`進行中に加えるサイン波の縦揺れ量
Wave Cycles波の周期数`Float``1.0``progress = 0..1` の全体で何周期ぶん波を進めるか
Bounce Heightバウンス高さ`Float``0.0`各文字のローカル進行度に沿って 1 回だけ上に跳ねる量

どう考えればいい?

  • TextLayout は「どこに文字を置くか」を持つ
  • TextAnimateByGlyph は「その文字ごとにどう動かすか」を上書きする
  • 最後に TextRasterize v2TextOutline で画像へ焼く

1文字単位の考え方

  • v1 の glyph は実質 1文字単位
  • 先頭文字 = 01文字目
  • 末尾文字 の上限は、入力された TextLayout の文字数に合わせて自動調整される

進行度の考え方

  • progress0..1
  • 対象文字数が 11 文字なら、1 文字刻みは 1 / 11
  • stagger を 0 より大きくすると、各文字に順番に遅延が乗る

技術詳細

  • このノードは TextLayoutGlyph.visible / opacity / translate / scale を更新した新しい TextLayout を返す
  • translate_x / translate_y は「開始位置から元の位置へ戻る」補間として使う
  • start_scale / start_opacity も「開始状態から通常状態へ戻る」補間として使う
  • wave_y は進行中にサイン波オフセットを追加する
  • bounce_y は各文字ごとに 1 回だけ山なりの縦バウンスを追加する
  • TextRasterize v2 / TextOutline 側で translate / scale / opacity を読んで描画する
  • 出力 TextLayout は Inspector の 文字レイアウト(デバッグ) で glyph index / bbox を確認できる

使用例

[Text Input] -> [Text Layout] -> [文字アニメーション] -> [テキスト画像化] -> [Preview]
[Text Input] -> [Text Layout] -> [文字アニメーション] -> [文字アウトライン] -> [Preview]

💡 ヒント

  • このノードは `TextLayoutGlyph.visible / opacity / translate / scale` を更新した新しい `TextLayout` を返す
  • `translate_x / translate_y` は「開始位置から元の位置へ戻る」補間として使う
  • `start_scale / start_opacity` も「開始状態から通常状態へ戻る」補間として使う
  • `wave_y` は進行中にサイン波オフセットを追加する
  • `bounce_y` は各文字ごとに 1 回だけ山なりの縦バウンスを追加する
  • `TextRasterize v2` / `TextOutline` 側で `translate / scale / opacity` を読んで描画する
  • 出力 `TextLayout` は Inspector の `文字レイアウト(デバッグ)` で glyph index / bbox を確認できる

関連ノード

text-input
text-layout
preview
Text Animate By Glyph (文字アニメーション) — PixPipeline ノード解説