文本动画:逐字、逐词、打字机

一句话整体淡入只是「一个动画」;要让文字像波浪一样依次浮现,得先把它拆开。 split-text 用 JS 把文本切成字 / 词 / 行,每个单位包进独立的 <span>, 再给它们一段相同的入场动画 (opacity 0→1 + translateY 上浮),只在起始延迟上拉开差距—— 这正是交错 stagger 做的事。打字机 (typewriter) 是另一种逐字 reveal:不是位移淡入,而是按固定节奏一个一个「敲」出字符,末尾跟一个闪烁光标。

split-text:拆分粒度 + stagger 方向

切换粒度决定拆成什么单位 (字 / 词 / 行),切换方向决定波从哪里发起 (正序 first / 逆序 last / 从中间 center)——后者就是 stagger(each, { from }) 的 from 参数。每个单位是一个独立的 Animation,延迟由 stagger 按它到发起点的距离算出。

单位数 —末单位延迟 — ms

拆分的取舍:按字拆 (char) 颗粒最细、波最连贯,但会破坏单词与连字,英文长句慎用; 按词拆 (word) 保留单词完整;按行拆 (line) 最稳,适合大段排版。无论哪种, 包裹用的 <span> 都要 display:inline-block,否则 translateY 对纯 inline 元素不生效。空格按词拆时需单独保留 (用 white-space:pre),否则会被折叠。

typewriter:逐字 reveal + 光标

打字机不靠位移,而是让已显现的字符数随时间从 0 增长到全长。把它建模成一个 keyframes:[0, total]、ease:'linear' 的 Animation, onUpdate 里按当前值截取 text.slice(0, n) 写回。速度滑块直接换算成每字耗时 (总时长 = 每字耗时 × 字数)。光标是一个常驻闪烁的 .caret。

每字耗时 — ms进度 —

两种 reveal 的本质:split-text 是「N 个动画 + 各自一个 delay」,所有单位都参与运动、只是先后错开;typewriter 是「1 个动画 + 一个递增的整数游标」,运动的不是字符而是「显现到第几个字」。前者强调编排 (stagger),后者强调把离散事件 (敲出第 n 个字) 挂到连续进度上。

@vega/anim — split-text 拆分 + stagger 入场

@vega/anim — typewriter 逐字 reveal

入场用的「上浮」动画其实是一条多关键帧轨迹,编排细节见关键帧与编排; 每个单位从 opacity 0 到 1、translateY 从 8px 到 0 的过渡值如何算出,见插值。