高级效果

掌握基础标签映射后,你可以通过 UGlyphAnimation 关键帧编辑、FGlyphScheduleInfo 逐字时序与多图层合成创建更丰富的文字动画效果。

UGlyphAnimation 深层编辑

适用场景:在 Sequencer 中对文字动画进行关键帧级别的精确编辑。

UGlyphAnimationUMovieSceneSequence 子类,双击资产在 Sequencer 中打开:

  1. 内容浏览器中双击字形动画资产(UGlyphAnimation
  2. Sequencer 打开,显示该动画的时间轴
  3. 添加类型化子轨道(UMovieSceneGlyphAnimationSection),编辑 FloatChannel 关键帧与曲线
  4. 蓝图节点 获取持续时间 / 获取轨道类型 / 是否有轨道类型 查询资产属性

可编辑的 10 种轨道类型(21 通道)

轨道类型通道数说明
Opacity1不透明度(默认 1.0)
LetterSpacing1字间距(像素)
Rotation1旋转角度(度)
Translation2位置偏移 X / Y(像素)
Scale2缩放 X / Y(默认 1.0)
Shear2剪切变换 X / Y
Pivot2枢轴 X / Y(默认 0.5)
ShadowOffset2阴影偏移 X / Y(像素)
Color4染色 R / G / B / A(A = 染色占比)
ShadowColor4阴影颜色 R / G / B / A

TIP

最常用的通道组合是 Opacity + Translation + Scale + Rotation,覆盖大部分文字动画需求。染色(Color)通过 A 通道控制染色占比(A=1 完全染色)。

逐字时序控制

适用场景:调整每个字形的播放延迟与排程,控制逐字动画节奏。

调度 API

通过 UGlyphAnimationLayer 调度函数控制(Index = -1 作用于全部):

// 创建层(必须指定动画资产与混合模式)
TArray<FGlyphScheduleInfo> Schedule = FAnimationCompiler::BuildScheduleInfos(Text);
UGlyphAnimationLayer* Layer = UGlyphAnimationLayer::CreateLayer(
    AnimAsset, ETextAnimationBlendMode::Override, Schedule);

// 逐字错峰
Layer->SetStartDelayAt(-1, 0.0f);   // 起始延迟基准
Layer->SetDelayAt(-1, 0.05f);       // 第 i 个字形延迟 = 0 + i × 0.05
Layer->SkipAt(-1);                  // 批量跳过
Layer->SetSkipAnimationAt(3, false);// 恢复第 3 个字形

逐字延迟示例

10 个字形、错峰 0.05s → 第 10 个字形在 0.45s 开始,总动画 ≈ 0.5s

NOTE

跳过(SkipAt)仅跳过该字形的动画(静态显示),不跳过渲染——空白字符仍占据版面空间。空白/标点/CJK 分类可用 IsWhitespaceAt / IsPunctuationAt / IsCJKAt / IsDecoratorAt 查询。

多图层合成

适用场景:将多个 UGlyphAnimationLayer 烘焙合并为复合动画效果。

UGlyphAnimationFactory

// 1. 创建工厂(必须传入基础层 + 调度)
UGlyphAnimationFactory* Factory = UGlyphAnimationFactory::CreateFactory(BaseLayer, Schedule);

// 2. 添加图层(后添加的层级更高)
Factory->AddLayer(WaveLayer);
Factory->AddLayer(ShakeLayer);

// 3. 工厂级微调(作用于混合后的最终状态)
Factory->MultiplyTranslationAt(-1, FVector2D(1.5f, 1.0f));

// 4. 烘焙
FBakedStage Stage = Factory->Bake();

每个图层独立定义曲线与调度,合并时按 ETextAnimationBlendMode 决定混合方式:

模式语义典型用途
Override覆盖已有值基础层
Additive叠加到已有值抖动/波浪叠加层
Multiply与已有值相乘全局调制
CrossFade与已有值插值混合过渡

NOTE

默认实现约定:GlyphAnimations[0] 为基础层(Override),GlyphAnimations[1..N] 为叠加层(Additive)。层创建时必须显式指定混合模式,不存在隐式默认值。

动画剪切

适用场景:裁掉动画曲线的前/后端,只保留有效区间。

Layer->SetAnimationClipAt(0.1f, 0.0f);     // 跳过前 0.1s
Factory->SetAnimationClipAt(0.0f, 0.3f);   // 工厂级:裁掉末端 0.3s

播放轴口径:前端裁剪 = 跳过开头,末端裁剪 = 提前结束;有限循环展开物化(只改最后一次循环)。

运行时阶段控制

适用场景:在蓝图或 C++ 中动态控制阶段播放。

UTextAnimationStageController 控制阶段播放流程:

  1. 手动路径:FAnimationCompiler::BakeAllStages(BP, Text)Initialize(&Baked, BP)Play()
  2. UMG 路径:控件自动完成,直接调用 播放 节点
  3. 设置播放方向EStagePlayDirection):Forward / Reverse / PingPong
  4. 设置循环:阶段循环播放
  5. Tick 动画:每帧推进(控件自动)
  6. 揭示所有:跳过动画直接显示全部文字

阶段状态查询

EStagePlaybackState 反映当前播放状态:

  • Stopped — 未播放
  • Playing — 播放中
  • Paused — 已暂停
  • Complete — 播放完成

性能建议

适用场景:优化长文本或多字符动画场景下的运行时性能。

  1. FBakedGlyph::Evaluate 每帧为每个非静态字形求值——长文本(>100 字形)利用调度延迟让大部分字形处于”未开始/已完成”状态,减少活跃字形数
  2. 烘焙由指纹缓存(MinFramesBetweenRebakes = 3 冷却)节流,运行时无重复烘焙
  3. 空通道跳过:删除未使用的轨道,减少求值通道数
  4. 富文本多条目:长对话拆分为短段落,使用 bSequentialPlayback 顺序播放代替全部同时播放

TIP

对于长文本(>100 字形),建议拆分为多个段落,每段使用独立的 UAnimatedRichTextBlock 控件,并按需播放而非全量常驻。

images/multi-layer-composition.png — 多图层合成示意:同一字形三层叠加(基础层 Override 波浪、叠加层 Additive 抖动、调制层 Multiply 淡入),FactoryOverride 整体修饰,下方标注错峰时间线(每字形在 X + i×Y 时刻开始) — Multi-layer composition diagram: three layers over one glyph (Override base wave, Additive shake, Multiply fade-in modulation), FactoryOverride as final modifier, staggered timeline below (each glyph starting at X + i×Y)