不规则形状动画

通常制作 CSS 动画时，都只是单纯的位移、旋转或放大缩小，但如果透过 path() 函数搭配 clip-path，就能展现更多 CSS 动画的创意，这篇教学会介绍如何建立“可以制作动画”的路径，以及透过 clip-path 和 animation 制作不规则形状动画。

快速导览：

• 如何绘制路径？
• 制作 CSS 动画专用的路径
• 制作不规则形状动画

如何绘制路径？

在 CSS 中使用的路径，基本上和 SVG 的路径相同，差别只在于 SVG 多了许多填色、粗细、视图等图形专用的属性，但对于 CSS 而言，只需要有“路径”的编码，就可以开心的透过路径创造出各种效果，通常要绘制路径，通常都会使用 Adobe Illustrator 等向量绘图软件绘制，几乎不会有人透过撰写程序码绘制 ( 参考“认识路径 path ”)，如果手边没有 Adobe Illustrator，也可以透过免费的线上向量绘图工具 Vectorpea 绘制，从下方的链接打开 Vectorpea。

打开 Vectorpea：https://www.vectorpea.com/

启 Vectorpea 之后，点击“新增专案”，建立一个尺寸为 300x300 的空白文件，尺寸可以按照个人需求调整，不过因为是网页动画图片，建议不需要太大尺寸 ( 使用 Illustrator 也是同样做法 )。

使用左侧“钢笔 Pen”工具，在画布中点击绘制路径，单纯点击可以产生直线 ( 使用 Illustrator 也是同样做法 )。

如果点击时压着鼠标不放，就可以绘制贝兹曲线 ( 使用 Illustrator 也是同样做法 )。

编辑路径后，用鼠标拖拉节点调整钮就能调整贝兹曲线形状，连续点击节点就能变成“尖角”或“圆角”。

绘制完成后，从左上选单 File 里选择“Export as > SVG”，将文件输出为 SVG 格式 ( 勾选 minify )。

使用浏览器打开 SVG 观察源代码，就可以看见 SVG 的 path 元素，当中的 d 参数就是路径，进行到这个步骤后就已经完成了路径绘制。

制作 CSS 动画专用的路径

知道如何绘制路径之后，接着要绘制“CSS 动画专用”的路径，所谓动画专用需要符合下列几种条件：

• 节点数需要相同。
• 调整控制点数量需要相同。

举例来说，下方是一个单纯四边形的路径，以及一个单纯圆形的路径，由于四边形的四个点没有“贝兹曲线调整控制点”，因此路径编码和圆形的路径编码截然不同。

如果节点、调整控制点的数量不同，进行动画 animation 或转场 transition 效果时，由于 CSS 无法计算需要加入的补间值，就会发生“忽略补间值”，直接从开头跳到结尾的现象，下方的例子会使用上述的四边形和圆形路径编码，当鼠标移动到四边形上方时，可以发现完全没有补间动画效果，直接从正方形变成了圆形，原本设定的 transition: .5s 也由于没有补间动画，变成了延迟 0.5 秒。

线上展示：https://codepen.io/oxxo/pen/yyBKdqR

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px; 
    background: orange;
    transition: .5s;
    clip-path: path("m173 24v147h-147v-147z");
  }
  div:hover {
    clip-path: path("m99.5 178c-43.4 0-78.5-35.1-78.5-78.5 0-43.4 35.1-78.5 78.5-78.5 43.4 0 78.5 35.1 78.5 78.5 0 43.4-35.1 78.5-78.5 78.5z");
  }
</style>

因此如果要做到具有补间动画效果，就必须在向量绘图软件中，将正方形的四个节点修改成“有调整控制点”的路径，且控制点的数量也需要和圆形相同，都是一个节点搭配两个控制点。

特别注意，目前 clip-path 无法正确判断“控制点”，因此如果要实现此效果，尽可能不要使用过多的控制点，或使用具有太大变化幅度的控制点。

完成后储存成 SVG 并读取源代码取的路径，替换正方形的路径之后，就能产生漂亮的补间动画效果，如果发生“位移较大”的状况，通常是“起点位置”不同所导致，修改路径起点就能解决这个状况。

线上展示：https://codepen.io/oxxo/pen/ZYzxdjw

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px; 
    background: orange;
    transition: .5s;
    clip-path: path("m26 173c0-52.1 0.1-104.5 0.1-147 39.7 0 117 0.1 147 0.1 0 40.9-0.1 114.7-0.1 147-30 0-117-0.1-147-0.1z");
  }
  div:hover {
    clip-path: path("m99.5 178c-43.4 0-78.5-35.1-78.5-78.5 0-43.4 35.1-78.5 78.5-78.5 43.4 0 78.5 35.1 78.5 78.5 0 43.4-35.1 78.5-78.5 78.5z");
  }
</style>

运用同样的方式，在“固定节点与控制点”的前提下，将正方形改成爱心图案，并记下爱心图案的路径编码。

修改刚刚的程序码，将圆形的路径编码换成爱心路径编码，执行后当鼠标移动到四边形上方时，就会看见变成爱心图案的效果。

线上展示：https://codepen.io/oxxo/pen/JoPLQeo

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    width: 200px;
    height: 200px; 
    background: orange;
    transition: .5s;
    clip-path: path("m26 173c0-52.1 0.1-104.5 0.1-147 39.7 0 117 0.1 147 0.1 0 40.9-0.1 114.7-0.1 147-30 0-117-0.1-147-0.1z");
  }
  div:hover {
    clip-path: path("m101 171.2c-79.9-14.5-97-110.2-72.9-125.5 30.2-19.3 57.7-8.2 72.9 23 18.9-32 42.4-55 74.8-25.8 20.2 18.1 0.4 100-74.8 128.3z");
  }
</style>

制作不规则形状动画

了解绘制 CSS 动画路径的原理之后，就可以开始着手制作“不规则形状动画”，首先绘制一个圆形，接着在圆形的边缘上新增一些节点 ( 根据个人喜好新增 )，将圆形另存为 SVG 产生路径编码后，利用“节点调整”工具调整节点位置，使其变成另外一个形状，依此类推产生两个形状，并都另存为 SVG 产生路径编码。

三个图形的路径编码完成后，使用下方范例，利用 CSS animation 制作动画，就能产生漂亮的不规则形状动画。

参考：CSS 动画 animation、clip-path 使用 path 绘制不规则形状

线上展示：https://codepen.io/oxxo/pen/QwLmXXV

<!-- HTML 程式碼 -->
<div></div>

<!-- CSS 程式碼 -->
<style>
  div {
    background: orange;
    width: 200px;
    height: 200px;
    animation: oxxo 2s infinite;
  }

  @keyframes oxxo {
    0% {clip-path: path("m100 178c-18 0-34.6-6.1-47.8-16.3-10.8-8.4-19.4-19.6-24.6-32.5-3.6-9-5.6-18.9-5.6-29.2 0-14.3 3.8-27.7 10.6-39.3 7.3-12.5 18-22.8 30.9-29.7 10.9-5.7 23.3-9 36.5-9 17.9 0 34.5 6 47.6 16.2 10.7 8.2 19.2 19.2 24.4 31.8 3.9 9.2 6 19.4 6 30 0 14.4-3.9 28-10.7 39.6-6.8 11.4-16.3 20.9-27.7 27.7-11.6 6.8-25.2 10.7-39.6 10.7z");}
    25% {clip-path: path("m96.7 113.1c-18 0-31.3 58.8-44.5 48.6-10.8-8.4 30.1-41.4 24.9-54.3-3.6-9.1-55.1 2.9-55.1-7.4 0-14.3 49.6-0.4 56.3-12 7.3-12.5-27.7-50.1-14.8-57 10.9-5.7 23.3 54.3 36.5 54.3 17.9 0 34.5-57.3 47.6-47.1 10.7 8.2-35.5 40.3-30.2 53 3.8 9.2 60.6-1.8 60.6 8.8 0 14.4-59.1-5.4-65.9 6.2-6.8 11.4 38.9 54.3 27.5 61.1-11.6 6.8-28.5-54.2-42.9-54.2z");}
    50% {clip-path: path("m100 178c-18 0 6.2-50.2-7-60.5-10.8-8.4-60.2 24.6-65.4 11.7-3.6-9 52.1-22.1 52.1-32.4 0-14.3-53.9-24.5-47.1-36.1 7.3-12.5 41.4 21.2 54.3 14.4 10.8-5.8-0.1-53.1 13.1-53.1 17.9 0 1.9 39.1 15 49.2 10.7 8.3 51.8-13.8 57-1.2 3.9 9.2-47.8 15.2-47.8 25.8 0 14.5 49.9 32.2 43.1 43.8-6.8 11.4-41.4-28.3-52.9-21.6-11.6 6.8 0 60-14.4 60z");}
    75% {clip-path: path("m96.7 113.1c-18 0-31.3 58.8-44.5 48.6-10.8-8.4 30.1-41.4 24.9-54.3-3.6-9.1-55.1 2.9-55.1-7.4 0-14.3 49.6-0.4 56.3-12 7.3-12.5-27.7-50.1-14.8-57 10.9-5.7 23.3 54.3 36.5 54.3 17.9 0 34.5-57.3 47.6-47.1 10.7 8.2-35.5 40.3-30.2 53 3.8 9.2 60.6-1.8 60.6 8.8 0 14.4-59.1-5.4-65.9 6.2-6.8 11.4 38.9 54.3 27.5 61.1-11.6 6.8-28.5-54.2-42.9-54.2z");}
    100% {clip-path: path("m100 178c-18 0-34.6-6.1-47.8-16.3-10.8-8.4-19.4-19.6-24.6-32.5-3.6-9-5.6-18.9-5.6-29.2 0-14.3 3.8-27.7 10.6-39.3 7.3-12.5 18-22.8 30.9-29.7 10.9-5.7 23.3-9 36.5-9 17.9 0 34.5 6 47.6 16.2 10.7 8.2 19.2 19.2 24.4 31.8 3.9 9.2 6 19.4 6 30 0 14.4-3.9 28-10.7 39.6-6.8 11.4-16.3 20.9-27.7 27.7-11.6 6.8-25.2 10.7-39.6 10.7z");}
  }
</style>

小结

透过 CSS 制作不规则形状的程序码其实相当简单，最困难的其实是“绘制路径”，除了要精准控制节点和控制点数量，如何绘制出漂亮的形状以及掌握补间动画效果才是重点，不过只要多次尝试练习，就可以做出漂亮的不规则形状效果啰。

意见反馈