Awesome GraphAppearance
这是 A Guide to SVG Animations (SMIL) 的部分内容3。
morphing path动画就是对描述形状的 <path d="..."> 上的 d （即 data）或者是 <polygon points="..." /> 上的 points 进行动画，从一个形状转变为另一个形状，形成很酷炫的效果。具体效果可以参考 GreenSock MorphSVGPlugin
- 为了实现SVG路径动画，需要指定
attributeName="d"
WARNING
SVG原生的Morphing path 动画存在如下要求：
path A->path B需要路径A&B以及中间路径的顶点数量一样，否则morphing path动画是不会生效的
关于SVG Shape Morphing 原理可以看：
🌰一些示例：
html
<svg viewbox="0 0 100 100">
<path fill="#1EB287">
<animate
attributeName="d"
dur="1440ms"
repeatCount="indefinite"
keyTimes="0;
.0625;
.208333333;
.3125;
.395833333;
.645833333;
.833333333;
1"
calcMode="spline"
keySplines="0,0,1,1;
.42,0,.58,1;
.42,0,1,1;
0,0,.58,1;
.42,0,.58,1;
.42,0,.58,1;
.42,0,.58,1"
values="M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z;
M 0,0
C 50,0 50,0 100,0
100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
Z;
M 50,0
C 75,25 75,25 100,50
75,75 75,75 50,100
25,75 25,75 0,50
25,25 25,25 50,0
Z;
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;
M 25,50
C 37.5,25 37.5,25 50,0
75,50 75,50 100,100
50,100 50,100 0,100
12.5,75 12.5,75 25,50
Z;
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;
M 50,0
C 77.6,0 100,22.4 100,50
100,77.6 77.6,100 50,100
22.4,100, 0,77.6, 0,50
0,22.4, 22.4,0, 50,0
Z;
M 100,0
C 100,50 100,50 100,100
50,100 50,100 0,100
0,50 0,50 0,0
50,0 50,0 100,0
Z;"/>
<animate
attributeName="fill"
dur="1440ms"
repeatCount="indefinite"
keyTimes="0;
.0625;
.208333333;
.3125;
.395833333;
.645833333;
.833333333;
1"
calcMode="spline"
keySplines="0,0,1,1;
.42,0,.58,1;
.42,0,1,1;
0,0,.58,1;
.42,0,.58,1;
.42,0,.58,1;
.42,0,.58,1"
values="#1eb287;
#1eb287;
#1ca69e;
#188fc2;
#188fc2;
#bb625e;
#ca5f52;
#1eb287;"/>
</path>
</svg>
可以看出上面 values 中的每个值都是path的 d 路径，并且每次变换 d 的顶点数量是一致的。
📚 Morphing Path相关文章：
🤩 Morphing Path的一些资源：
- GSAP MorphSVG Showcase collection - @codepen 使用GSAP MorphSVG 插件做的一些动画效果（备注：该插件是付费的）
- 数字Morphing Path效果 - @codepen
- Morphing Path + clipping Mask 组合动画 - @codepen
🔧 一些Morphing Path 工具库：
- svg-path-morph - @github
- KUTE.js SVG Morph
- GSAP MorphSVGPlugin 这个很强大，但是是付费的，不用考虑顶点数量是否相同😎
- Framer Motion React用户可以使用
<motion.path>可以进行Morphing Path
直接用SVG原生的比较受限，简易使用一些工具库进行Morphing Path动画
2022年11月15日14:33:54