变形动画：path 的 `d` (DEBUG MODE)

Waiting for debug info...

这就是你想要的“形状变形”。在本库里，只要两段 d 字符串结构一致（命令序列相同，数字数量相同），就能直接插值，做出平滑 morph。

关键点：不要试图让“完全不相干”的两条 path 直接互变。先让它们有相同的命令结构（比如都用 4 段 cubic Bézier），再改数值。
下面 demo 会显示两条参考虚线（From/To），中间那条橙色实体才是正在 morph 的路径。

Morph (path d) code example

JavaScript

HTML

CSS

const FROM = 'M160 60 C204 60 240 96 240 140 C240 184 204 220 160 220 C116 220 80 184 80 140 C80 96 116 60 160 60 Z'; const TO = 'M160 34 C252 62 260 112 224 140 C188 168 196 238 160 224 C124 210 132 168 96 140 C60 112 68 62 160 34 Z'; xjs('#m').animate({ d: [FROM, TO], duration: 1200, easing: 'ease-in-out', update: ({progress}) => console.log(progress) });

.path { fill: rgba(255,159,67,0.12); stroke: rgba(255,159,67,0.62); stroke-width: 2.2; }

功能说明：
- 本库会把字符串里的数字提取出来逐个插值，然后把字符串“拼回去”写回属性。
- 适合：logo 变形、icon morph、液体/呼吸形状、SVG 插画过渡。

progress: 0%

duration 1200ms

loop 2

Previous
—

SVG

Next
—

变形动画：path 的 d (DEBUG MODE)

变形动画：path 的 `d` (DEBUG MODE)