Text Morph：让一个词「变形」成另一个词

「十二个月」不断切换的那种标题动画，看久了会发现它和普通的词轮播不一样：字不是整块换掉的。旧词的每个字母各自滑向新位置、在半路换成另一张脸，长出来的字母从串尾外侧挤进来——过渡中途甚至能看到字距被短暂拉开、又收拢回去。这一节把它拆成三步做出来：量（每个字在哪）、排（谁淡出、谁淡入、谁只是搬家）、错（每个字什么时候起跑）。三步里 JS 只做前两步，真正的插值一行 transition 就够了。

同一个「末尾那个词在转」的需求，本系列已经有一条零 JS 的路子（@counter-style 当词表 + @property <integer> 当索引）。那条路整词整块地换，胜在完全不用 JS；这一页要的是字级别的连续性，代价就是必须测量，也就必须有 JS。想看同一效果由手写引擎逐帧驱动、并能 seek / 反向 / 中途重定向的版本，见动画引擎系列的 Text Morph。

1 · 先看三种做法差在哪

同一组词、同一个节奏，三行分别是：直接换 textContent、整词 crossfade、逐字 morph。

• ① 换 textContent——没有中间态。视觉上是「闪一下变成另一个词」，读者的眼睛得重新找一遍焦点。
• ② 整词 crossfade——有中间态，但那是两个各自居中的完整词叠在一起。重影里读不出「谁变成了谁」，长度差得越多越糊。
• ③ 逐字 morph——每个字是一个独立的动画主体。眼睛能跟住某个字母从旧位置挪到新位置，于是「这是同一行字在变形」这件事被讲清楚了。

2 · 第一步：量——为什么这套效果离不开 JS

要让每个字各自搬家，就得知道每个字该在哪。而「第 i 个字距串首多远」只有排版引擎知道（字宽随字体、字号、字重变），CSS 拿不到这个数。所以先拿一把尺子逐字量：

// 一把与舞台同字体同字号的隐藏尺子, 逐字量出左缘偏移与宽度
const spans = [...text].map((ch) => { /* 一个字一个 span, 塞进 ruler */ });
const base = ruler.getBoundingClientRect().left;
const glyphs = spans.map((s, i) => {
  const r = s.getBoundingClientRect();
  return { ch: text[i], x: r.left - base, w: r.width };
});

量完把坐标中心化：每个字的 x 减去整串宽度的一半，换成「相对文本中心」的偏移。这一步看着琐碎，却是整套算法的基准——两串长度不同，只有以中心为原点，共有的字才落在可比的位置上。落到 CSS 上也刚好省一件事：

.morph-char {
  position: absolute;  left: 50%;  top: 0;      /* 原点 = 容器中心 */
  transform: translateX(var(--x));               /* --x 是相对中心的偏移 */
}

3 · 第二步：排——两串字怎么配对

有了两串的坐标，接下来要回答：新画面上的每个字，是从旧画面的哪个字变过来的？两种策略，代价与观感各不相同。

index 对齐：第 i 个对第 i 个。字相同就只是搬家（keep），字不同就在同一段轨迹上叠一对 out + in（旧的淡出、新的淡入，同起同止）——这就是「原地换脸」。新串更长时，多出来的字在旧串里没有位置，让它从旧串末尾继续往外排的地方滑进来，比原地淡入更像「这串字被撑开了」。

LCS 对齐：先用最长公共子序列找出两串里真正共有的字，这些字复用为 keep、长途搬家到新位置，其余淡出 / 淡入。同一个字母不会被毫无理由地换成另一个字母，过渡更「讲道理」，但字动得更多、路线更长。这正是列表 diff 的内核用在了字符上。

下面这一格把过渡定格了：拖播放头看任意时刻的画面，下面的槽位表同步显示每个字的 role、起止坐标、起跑时间。换个对齐策略，看同一对词被排成完全不同的一组槽位。

.morph-scrub .morph-char {
  animation: morph-x var(--dur) var(--ease) both paused,
             morph-o var(--fade) linear both paused;
  animation-delay: calc(var(--d) - var(--t)),  calc(var(--d) - var(--t));
}
@keyframes morph-x { from { transform: translateX(var(--x0)) } to { transform: translateX(var(--x1)) } }

4 · 第三步：错——招牌的「字距被拉开」

如果所有字同时起跑、同时落定，效果会意外地平淡：整行字像一块板子在变形。真正让它好看的是交错（stagger）——同一段过渡，第 i 个字晚一点开始：

.morph-char {
  transition:
    transform var(--dur) var(--ease) var(--d),   /* --d 是这个字的起跑时间 */
    opacity   var(--fade) linear     var(--d);
}

一个 transition-delay 而已，但过渡中途每个字走到的进度不同，字距就被短暂拉开、再收拢回去——视频里那些「Janua ry」「Oc to ber」的瞬间全部来自这里。方向决定波从哪儿发起：ltr 从左推过去最像「读」的顺序，center 从中间向两边扩散最像「撑开」，random 则有一种老式翻牌机的躁动。

纯 CSS 也能表达这类「第 i 个晚一点」，见本系列 Scrubbable Stagger 用 sibling-index() 直接在 CSS 里算出每个兄弟的延迟。这里没用它，是因为槽位本来就是 JS 现算现建的，顺手写上 --d 更直接；但若你的字是静态写死在 HTML 里的，sibling-index() 能让这一步也脱离 JS。

5 · 完整轮播

三步凑齐，就是开头那个效果。所有参数都可调——词表、对齐策略、位移时长、换脸时长、交错强度与方向、缓动、停留时长、字号。下面的代码面板是当前这一轮真正生效的 CSS 与变量值。

几个调参手感：

host.append(...els);        // 1. 以起始 --x / --o 入场
void host.offsetWidth;      // 2. 读一次布局, 逼浏览器认领起始样式
els.forEach(...)            // 3. 改成目标 --x / --o, transition 接管

6 · 无障碍与收尾

<span class="morph-sr">September</span>          <!-- 只给读屏, clip-path: inset(50%) -->
<span class="morph-char" aria-hidden="true">S</span>…

@media (prefers-reduced-motion: reduce) {
  .morph-char { transition-duration: 1ms, 1ms; }
}