CSS `Offset Path` 与 `Path()` 函数结合，实现非线性运动动画

各位观众老爷，大家好！今天咱们来聊聊 CSS 里一个挺有意思的东西：offset-path 结合 path() 函数，让你的动画不再走寻常路，玩出点花样来。

开场白：告别直线，拥抱曲线

咱们平时用 CSS 做动画，是不是经常让元素从左往右，从上往下，或者斜着飞过去？看起来是不是有点单调？就像每天吃炒饭，总得换个口味不是？offset-path 就是来拯救你的，它能让你的元素沿着你指定的路径运动，可以是曲线，可以是波浪线，甚至可以是你想画的任何形状！

第一部分：offset-path 是个啥？

offset-path，顾名思义，就是偏移路径。它定义了一个元素在动画过程中应该遵循的路径。你可以把它想象成一条跑道，你的元素就是赛车，它会沿着这条跑道一路狂奔。

offset-path 的取值有很多种，但今天咱们重点讲的是 path() 函数。

第二部分：path() 函数：路径的魔法棒

path() 函数允许你使用 SVG 路径语法来定义你的路径。如果你对 SVG 不太熟悉，别担心，咱们会一步一步来。

SVG 路径语法速成班

SVG 路径语法是一系列的命令和坐标，用来描述一个形状。几个常用的命令如下：

M x y: 移动到 (x, y)。这是路径的起始点。
L x y: 画一条直线到 (x, y)。
H x: 画一条水平线到 x。
V y: 画一条垂直线到 y。
C x1 y1, x2 y2, x y: 画一条三次贝塞尔曲线到 (x, y)，使用 (x1, y1) 和 (x2, y2) 作为控制点。
Q x1 y1, x y: 画一条二次贝塞尔曲线到 (x, y)，使用 (x1, y1) 作为控制点。
A rx ry x-axis-rotation large-arc-flag sweep-flag x y: 画一个椭圆弧到 (x, y)。参数有点多，咱们后面会用到。
Z: 闭合路径，从当前点画一条直线到路径的起始点。

大小写区分：绝对坐标 vs 相对坐标

SVG 路径语法中的命令分大小写，大写字母表示绝对坐标，小写字母表示相对坐标。比如：

M 10 20：移动到 (10, 20)
m 10 20：从当前位置移动 (10, 20)

举个栗子：画个简单的直线

.element {
  offset-path: path("M 10 10 L 100 100");
}

这段代码的意思是，让 .element 沿着从 (10, 10) 到 (100, 100) 的直线运动。

第三部分：offset-path 的好基友们

光有路径还不够，咱们还需要一些小伙伴来配合 offset-path，才能让动画真正动起来。

offset-distance: 指定元素沿着路径移动的距离，取值范围是 0% 到 100%。0% 表示路径的起点，100% 表示路径的终点。
offset-rotate: 指定元素在沿着路径移动时旋转的角度。可以设置为 auto（自动根据路径方向旋转）或者 auto <angle>（在自动旋转的基础上再旋转一个角度）。
offset-anchor: 指定元素的哪个点对齐路径。默认是auto。

第四部分：实战演练：让小球沿着正弦曲线跳舞

咱们来做一个稍微复杂点的例子，让一个小球沿着正弦曲线运动。

HTML 结构：

<div class="container">
  <div class="ball"></div>
</div>

CSS 代码：

.container {
  width: 500px;
  height: 200px;
  position: relative;
  overflow: hidden; /* 隐藏超出容器的部分 */
}

.ball {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background-color: red;
  position: absolute; /* 必须是绝对定位或固定定位 */
  left: 0; /* 初始位置 */
  top: 0; /* 初始位置 */
  offset-path: path("M0 100 C 100 0, 400 200, 500 100"); /* 正弦曲线 */
  offset-anchor: center; /* 让小球中心对齐路径 */
  animation: move 5s linear infinite;
}

@keyframes move {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

代码解释：

container：定义容器的宽高和位置，并设置 overflow: hidden，防止小球超出容器时显示出来。
ball：
- width、height、border-radius、background-color：设置小球的样式。
- position: absolute：offset-path 只能用于绝对定位或固定定位的元素，非常重要！
- left: 0; top: 0;：设置小球的初始位置，虽然 offset-path 会覆盖这个位置，但如果不设置，有些浏览器可能会出现问题。
- offset-path: path("M0 100 C 100 0, 400 200, 500 100");：定义路径，这是一个三次贝塞尔曲线，模拟正弦曲线。
- offset-anchor: center;：设置小球的中心点对齐路径。
- animation: move 5s linear infinite;：应用动画。
@keyframes move：定义动画，让 offset-distance 从 0% 变化到 100%。

重点：贝塞尔曲线的调试

贝塞尔曲线的控制点不太好掌握，你可以借助在线工具来调试，比如：

https://cubic-bezier.com/

这个工具可以让你可视化地调整控制点，然后把生成的 cubic-bezier() 函数的值复制到你的 animation-timing-function 中。但这里我们用path() 函数，你需要在SVG编辑器中生成贝塞尔曲线的path 值，然后复制到path()中。

第五部分：更高级的玩法：沿着圆形路径旋转

咱们再来一个更酷炫的例子，让元素沿着圆形路径旋转，并且自身也旋转。

HTML 结构：

<div class="container">
  <div class="square"></div>
</div>

CSS 代码：

.container {
  width: 300px;
  height: 300px;
  position: relative;
  border-radius: 50%;
  overflow: hidden;
}

.square {
  width: 50px;
  height: 50px;
  background-color: blue;
  position: absolute;
  left: 0;
  top: 0;
  offset-path: path("M 150 0 A 150 150 0 1 1 149 0 Z"); /* 圆形路径 */
  offset-anchor: center;
  animation: rotate 5s linear infinite;
}

@keyframes rotate {
  0% {
    offset-distance: 0%;
    transform: rotate(0deg);
  }
  100% {
    offset-distance: 100%;
    transform: rotate(360deg);
  }
}

代码解释：

container：设置为圆形，并隐藏超出部分。
square：
- offset-path: path("M 150 0 A 150 150 0 1 1 149 0 Z");：定义圆形路径。
  - M 150 0: 移动到圆心正上方 (150, 0)。
  - A 150 150 0 1 1 149 0: 画一个椭圆弧到 (149, 0)。
    - 150 150: 椭圆的 x 轴半径和 y 轴半径。
    - 0: x 轴旋转角度。
    - 1: large-arc-flag，设置为 1 表示选择大弧。
    - 1: sweep-flag，设置为 1 表示顺时针方向。
  - Z: 闭合路径。
- animation: rotate 5s linear infinite;：应用动画。
@keyframes rotate：
- offset-distance: 从 0% 变化到 100%，让正方形沿着圆形路径运动。
- transform: rotate(0deg) 到 transform: rotate(360deg)：让正方形自身也旋转。

第六部分：offset-rotate: auto 的妙用

咱们再稍微改进一下上面的例子，让正方形自动根据路径方向旋转。

.square {
  /* ... 其他样式 ... */
  offset-rotate: auto; /* 自动根据路径方向旋转 */
}

@keyframes rotate {
  0% {
    offset-distance: 0%;
  }
  100% {
    offset-distance: 100%;
  }
}

只需要添加 offset-rotate: auto; 即可，并且移除了transform: rotate(0deg)和transform: rotate(360deg)，这样正方形就会自动对齐圆形路径，看起来更自然。

第七部分：兼容性问题和注意事项

兼容性： offset-path 的兼容性还可以，主流浏览器基本都支持，但老版本浏览器可能不支持，需要做一些兼容性处理。可以使用 Polyfill 来解决兼容性问题。
性能： 复杂的路径可能会影响性能，尽量简化路径。
定位： offset-path 只能用于绝对定位或固定定位的元素。
初始位置： 记得设置元素的初始位置，虽然 offset-path 会覆盖它，但有些浏览器可能会有问题。
offset-anchor： 灵活使用 offset-anchor 可以让元素更好地对齐路径。

第八部分：总结与展望

今天咱们学习了 offset-path 和 path() 函数，掌握了如何让元素沿着自定义路径运动，并了解了相关属性和注意事项。希望这些知识能帮助你做出更炫酷、更具创意的动画效果。

offset-path 的潜力还很大，结合 JavaScript 可以实现更复杂的交互动画。未来，我们可以期待更多关于 offset-path 的应用场景和技术突破。

结束语：动手实践，才能真正掌握

纸上得来终觉浅，绝知此事要躬行。光听讲是远远不够的，一定要自己动手实践，才能真正掌握 offset-path 的精髓。希望大家多多尝试，做出更多令人惊艳的动画作品！

祝大家学习愉快，再见！

发表回复 取消回复

发表回复取消回复