如果你看过《三体》，一定记得那段极具压迫感的桥段——
“古筝行动”。
一根超细切割线轻轻一勒，目标瞬间被“切”成无数层，而又保持整体位移。
那种平移 + 分层错位的视觉冲击，非常适合改编成 UI/交互中的“页面切换动画”。
最近我就尝试用 纯 SVG，复刻一段类似的过场效果。更妙的是：
👉 全程不用 JavaScript
👉 用 <animateTransform> 就能搞定动态切片 + 整体位移
这篇文章就从技术角度完整拆一下这个动画的结构，顺便分享一些可复用的技巧。
✦ 效果描述：一个“被切开的页面滑走”
为了方便理解，先用文字还原一下视觉效果：
-
初始：画面是一张完整的背景图
-
点击后：整张图快速“向左滑走”
-
同时：上面叠着的几条横向图片切片（100%、80%、60%、40%、20%）
- 也附带一个较小距离的横向偏移
- 于是形成一种“画面被线切成好几层，并开始错位滑动”的效果
最终观感类似：
原画面像《三体》里一样，被古筝弦切开 → 整块推出屏幕 → 下一帧登场。
这种动效非常适合：
- 内容过场动画
- 故事性 H5 的章节切换
- 高级感 Banner 进入/离场效果
- 科技类 UI 的“场景切换”
✦ 动画结构概览
核心思路可以归纳为 3 点：
1. 底层：完整背景图 A（整块位移）
2. 上层：相同背景图 B，切成数条“横条切片”
3. 行为：整体滑出 + 切片小幅错位 → 形成“古筝切割错层”
每条切片使用 <foreignObject> 裁高度：
100%
80%
60%
40%
20%
每条再次叠加自己的 <animateTransform>，就能做层层偏移。
✦ 核心代码（已整理可直接改图复现）
下面是经过我整理的、可以直接用的版本：
（图片 URL 换成你自己的即可运行）
<section style="margin-top:-1px;">
<svg
viewBox="0 0 1080 464"
style="width:100%;display:inline-block;
background-image:url('背景图A.jpg');
background-size:100%;background-repeat:no-repeat;">
<!-- 整图左滑：古筝“强制位移” -->
<g>
<animateTransform
attributeName="transform"
type="translate"
values="0 0;-1080 0"
dur="2s"
begin="click"
restart="whenNotActive"
fill="freeze"
calcMode="spline"
keySplines="0.24 0 0.24 1" />
<!-- 切片1：100% 高度 -->
<g pointer-events="none">
<g>
<animateTransform
attributeName="transform"
type="translate"
values="0 0;-200 0"
dur="2s"
begin="click"
restart="whenNotActive"
fill="freeze"
calcMode="spline"
keySplines="0.24 0 0.24 1" />
<foreignObject width="100%" height="100%">
<svg
style="width:100%;background-image:url('背景图B.jpg');
background-size:100%;background-repeat:no-repeat;"
viewBox="0 0 1080 464"></svg>
</foreignObject>
</g>
<!-- 切片2 ~ 切片N（高度按 80%、60%、40%、20% 依次递减） -->
</g>
</g>
</svg>
</section>
✦ 技术拆解：为什么能模拟“古筝切割”？
这是本文最关键的部分，下面分别拆开。
① <animateTransform> 实现“整体滑走”
values="0 0;-1080 0"
意味着：
- 起点
x=0 - 终点
x=-1080（刚好滑出一个 viewBox 宽度）
keySplines="0.24 0 0.24 1" 使用贝塞尔曲线，让动画更像：
- 慢启动 → 中段快速 → 尾部收缓
很符合“细线拉动”的张力感。
② 多层 foreignObject = 多条“切割片段”
每条切片都显示同一张图 B：
<foreignObject width="100%" height="80%">
只不过高度不同，所以叠起来的效果像是：
一整张图被切成多条横向碎片
如果把 height 调成 50 条，还能做“碎片化破碎”效果。
③ 切片自身也执行横向偏移 → 产生错位错层感
values="0 0;-200 0"
相比整图的 -1080，这个偏移很小。
因此组合效果是：
整图：快速滑走
切片：慢速偏移
--------------------------------
视觉上 → 切片被拖出不同距离 → “断层 / 错位”感
这也是“古筝行动”的核心灵魂。
✦ 还能怎么玩？
只要理解了这个结构，你就能自己扩展：
- 改成向右滑
- 改成上下裂解
- 一张图变成碎片喷射
- 多图切换过场
- 类似 GQ / 奈雪 的“内容分层+滑动”效果
甚至可以做：
像《星际穿越》那种“维度折叠式”切割
因为 SVG 的可组合性非常强。
✦ 想省时间？E2 编辑器里有现成的「古筝切换」组件（免费）
文章里的这段代码，就是从 E2 SVG 交互编辑器的组件导出结构。
它们家的特点对做 SVG 动效的同学来说非常友好：
✔ 1. 所有分层结构可视化
不用自己拆 height、复制 foreignObject。
✔ 2. 缓动曲线、偏移距离都可调
不用自己调 keySplines。
✔ 3. 组件库里直接叫 “古筝切换”
点击即可生成 → 一键换图 → 导出 SVG。
✔ 4. 组件是免费的
不用会员也能用，适合运营 / 前端快速搞定复杂动效。
对于文章封面、H5 过场、科幻风交互，这种组件非常省时间。 注意事项：
✦ 小结：SVG 真的能做复杂动效
这个案例其实说明了一件事：
SVG + animateTransform
完全可以做出高质感过场，而不必依赖 JS。
如果你喜欢：
- 电影式的画面切换
- 科技感 UI
- 内容运营里的动效表达
- 或者单纯想“玩” SVG
这种“分层错位 + 整体平移”结构是一类非常值得掌握的技巧。
如果你想继续看我拆解更多 SVG 组件（比如刮刮卡、掉落动画、烟花、错层滑动、Apple 风轮播），欢迎继续催更，我会持续更新系列文章。
—— END ——
