共计 3598 个字符，预计需要花费 9 分钟才能阅读完成。
⭐ SVG 变形动画（Morphing）
演示
原理
平滑的变形动画真的算是 SVG 中的 独门武器 了。其原理很容易想到。就是不同形态之间能平滑转换，SVG 中的形态其实也是有不同坐标之间的线段绘制而成的。那么在转换形态的时候，只是在挪动线段的坐标。从而达到了形态扭转的成果，加之平滑的动画展示。达到想要的成果。
边数相等
须要留神的是，如果咱们在做形态转换的时候，转换前形态的 控制点 和转换后的 控制点 数不同，这时动画转换会显得差强人意。因为 SVG 形态变形的时候要么减少控制点，要么缩小了控制点。而控制点的增删就不能平滑的转换了。
实战
上面咱们应用 GreenSock 编写变形动画，让一个五角星 ⭐️变动为十边形图案，GreenSock 中应用 MorphSVGPlugin 进行动画的绘制。次要通过动静设置门路的 d 属性数据达到平滑的动画成果。
值得一提的是，如果 SVG 图形中齐全是用 path 绘制的话，GreenSock 反对 path → path 转换的管制点数不同也能够实现平滑动画成果。
筹备矢量文件
咱们用 Sketch 绘制一个简略的五角星 ⭐️ 图案，看到五角星实际上有 10 个控制点
右键拷贝出 SVG path 代码
<path d="M185,1.12977573 L128.163889,116.292316 L1.07448057,134.759488 L93.0372403,224.401023 L71.3277776,350.976903 L185,291.215879 L298.672222,350.976903 L276.96276,224.401023 L368.925519,134.759488 L241.836111,116.292316 L185,1.12977573 Z" id="star" fill="#4af"></path>咱们再绘制一个十边形图案
右键拷贝出 SVG path 代码
<path d="M160,0 L258.885438,32 L320,110.557281 L320,210.424346 L258.885438,289.442719 C217.122754,309.81424 184.160941,320 160,320 C135.839059,320 102.877246,309.81424 61.1145618,289.442719 L0,210.424346 L0,110.557281 L61.1145618,32 L160,0 Z" id="decagon" fill="transparent"></path>动起来
path → path之间的变换，初始显示 star 门路，将 decagon 门路设置为 transparent，视觉上看不到十边形
<svg width="300" height="300" viewBox="0 0 600 600">
<!-- star path -->
<path d="M185,1.12977573 L128.163889,116.292316 L1.07448057,134.759488 L93.0372403,224.401023 L71.3277776,350.976903 L185,291.215879 L298.672222,350.976903 L276.96276,224.401023 L368.925519,134.759488 L241.836111,116.292316 L185,1.12977573 Z" id="star" fill="#4af"></path>
<!-- decagon path set fill transparent, you don't see the sharp -->
<path d="M160,0 L258.885438,32 L320,110.557281 L320,210.424346 L258.885438,289.442719 C217.122754,309.81424 184.160941,320 160,320 C135.839059,320 102.877246,309.81424 61.1145618,289.442719 L0,210.424346 L0,110.557281 L61.1145618,32 L160,0 Z" id="decagon" fill="transparent"></path>
</svg>// gsap.to()... infinity and beyond!
// For more check out greensock.com
let tl = gsap.timeline({
repeat: -1,
yoyo: true,
repeatDelay: 0.3,
defaults: {duration: 3}
})
// 让星星形态转换成十边形
tl
.to("#star", { morphSVG: "#decagon"})
.timeScale(3);https://codepen.io/xiaoluobod…
多个变换
GreenSock 同时反对多个形态的变换，假如咱们的变换规定变为：path → path → rect
星星变换到十边形之后再变换为一个矩形。而咱们晓得图形点数不同的图形之间变换不会达到预期成果，好在 MorphSVGPlugin 提供了能够将根本形态变为 path 的办法
// 将 circle 图形转换为 path
MorphSVGPlugin.convertToPath("rect");联合 MorphSVGPlugin 个性能够将任何 path → path 平滑变换动画，所以任何根本图形之间都能够平滑转换了。
多个图形之间的变换只需通过 GSAP 中到 timeline 实例追加变换规定就能够实现：
<svg width="300" height="300" viewBox="0 0 600 600">
<!-- star path -->
<path d="M185,1.12977573 L128.163889,116.292316 L1.07448057,134.759488 L93.0372403,224.401023 L71.3277776,350.976903 L185,291.215879 L298.672222,350.976903 L276.96276,224.401023 L368.925519,134.759488 L241.836111,116.292316 L185,1.12977573 Z" id="star" fill="#4af"></path>
<!-- decagon path set fill transparent, you don't see the sharp -->
<path d="M160,0 L258.885438,32 L320,110.557281 L320,210.424346 L258.885438,289.442719 C217.122754,309.81424 184.160941,320 160,320 C135.839059,320 102.877246,309.81424 61.1145618,289.442719 L0,210.424346 L0,110.557281 L61.1145618,32 L160,0 Z" id="decagon" fill="none"></path>
<!-- rectangle sharp -->
<rect id="rect" x="0.5" y="0.5" width="319" height="319" id="rect" fill="none"></rect>
</svg>// gsap.to()... infinity and beyond!
// For more check out greensock.com
MorphSVGPlugin.convertToPath("rect");
let tl = gsap.timeline({
repeat: -1,
yoyo: true,
repeatDelay: 0.3,
defaults: {duration: 3}
})
tl
.to("#star", { morphSVG: "#decagon"}, "+=1")
.to("#star", { morphSVG: "#rect"}, "+=1")
.timeScale(3);https://codepen.io/xiaoluobod…
蒙版动画
利用图形变换的成果。联合 SVG 中的 clipPath 能够轻松实现一个带有蒙版成果的动画，其原理实际上是应用 图形 将图片 遮照起来。
https://codepen.io/xiaoluobod…
参考
- How SVG Sharp Morphing Works
- GreenSock MorphSVGPlugin
对于
本文是《SVG 动画开发实战》系列文章第七章。
Notion 版本
小册是在 Notion 上实现撰写的，所以我保留了 Notion 的分享版本，你也能够点击这里查看。
GitHub 版本
小册提供了 GitHub 版本的在线浏览体验，传送门
微信公众号版本
关注我的技术公号，同样也能够找到此小册系列，目前在更新中。。。