375px 微信视口 · 主时间轴 22.3s · 滚到 P.04 点一下画面
然而 但是 于是 所以 然而 但是 于是 所以 然而 但是 于是 所以 ZINE / 长卷 SVG 解剖750 × 7000 ISSUE 001 SMIL · 22.3s 它是怎么动起来的 一份关于长卷 SVG 的技术小报 复刻《Claude by Claude》，并拆开它的制作链路 (620, 505) 750px NEXT TOKEN #1P.01 § 01 · 它不是什么750 × 7000 不是视频 不是 GIF 不是图片 是一段 SVG。 01viewBox<svg viewBox="0 0 750 11980">287KB 源码 · 532 个 text · 0 张位图 NEXT TOKEN #2P.02 § 02 · 复刻 · 终端幕750 × 7000 TERMsample P.02ASSISTANT:你好。 typewriter 0.3s/字 begin=0s · repeatCount=indefinite NEXT TOKEN #3P.03 § 03 · 复刻 · 交互幕750 × 7000 (180,2290) (400,2230) (620,2330) (300,2470) [ 点一下，看它们在看谁 ] begin=click × 5 · fill=freeze · restart=always NEXT TOKEN #4P.04 § 04 · 转折750 × 7000 ？ 可是，怎么做的？ 下面六屏，一层层拆给你看 NEXT TOKEN #5P.05 § 05 · 原理 ① 三段输入，一次编译750 × 7000 01skeleton.svg静态骨架 02timeline.json人写的时码 03timeline_compile脚本编译 OUT17 animatezine.svg NEXT TOKEN #6P.06 § 06 · 原理 ② 人不手写 keyTimes750 × 7000 CALCT = 22.3s cue: at 3.4s dur 1.6s T 22.3s a = 3.4 / 22.3 = 0.1525 b = 5.0 / 22.3 = 0.2242 keyTimes="0;0.1525;0.2242;1" 四段式：0→a 隐 · a→b 渐变 · b→1 保持 NEXT TOKEN #7P.07 § 07 · 原理 ③ 编译 = 把时码写进骨架750 × 7000 BEFORE <g data-cue="hero"> <text>…</text> </g> AFTER+animate <g data-cue="hero"> <animate/> <text>…</text></g> 元素上打个 data-cue，脚本就能找到它 NEXT TOKEN #8P.08 § 08 · 原理 ④ 点击靠嵌套层 + 透明热区750 × 7000 visibility:hidden 的元素收不到点击 —— 所以要把 N 个元素嵌成 N 层，热区放最内层 Layer 1 keyTimes 0;0;1 Layer 2 keyTimes 0;0.0229;1 Layer 3 keyTimes 0;0.0457;1 pointer-events="all" (240, 5920) (470, 5940) ↑ 点击后事件沿冒泡穿过每一层 各层 animate 同时 begin，靠递增的 keyTimes 错开先后 —— stagger 是结构造的，不是动画属性 NEXT TOKEN #9P.09 § 09 · 原理 ⑤ 体检 · 预览 · 发布750 × 7000 values 与 keyTimes 段数一致 keyTimes 单调递增，首 0 尾 1 热区在 click 动画的子树内 无 script / 外链 / 非系统字体 PASS · validate_svg.py0 error / 0 warn 375px 预览 → 手机真机确认 → 粘贴公众号 wechat-animating NEXT TOKEN #10P.10
v2 视觉重写补上的
· 色板 5 → 9 色（5 档纸灰）
· 密集小字 17/22 为主（样本 22px×220）
· 纸纹噪点 / 斜线网纹 / 半调网点
· 刻度尺 / 进度块 / 角标 / 伪 UI 标签
· 手绘箭头 / 手绘圈选 / 印章 / 坐标标注
· 12 个水印词 + 9 节点铺底
P.09 重画：两节点连线有起止语义（呼应 P.04），气泡沿虚线轨迹从热区上升。 63 条 animate · 0 error / 1 warn（17px 微标签为设计选择）。