CSS之：使用svg路径做关键帧动画

马黑黑

svg路径可以任意设计，通过 path 属性，svg能画出任何图形。CSS对svg的此功能自然不会放过，于是，有一个名叫 offset-path 的CSS属性，一看就知道其意，偏移路径，但不一定知道它用来干啥。嗯，CSS3以前，它不是这个名儿，而是叫 motion-path，这个才一看既知其意，又晓其作用，运动路径。好吧，offset-path的前身是motion-path，是用来做路径运动的。

offset，偏移，大量用于svg，比如针对这个 offset-path，配套的属性还有 offset-distance、offset-rotate 等，这两个在CSS实现svg路径动画中特重要，所以先提出来。顾名思义，offset-distance 是偏移距离之意，offset-rotate 是 偏移过程中如何旋转（auto是默认值，所以没有特殊需要不必设置 offset-rotate 属性）。

既是调用svg路径，我们就先来路径，然后在考虑如何在CSS中调用这个路径。这里使用A指令画一个椭圆路径：

<svg width="300" height="200">

<path d="M 10 100 A 140 80 0 1 1 290 100 A 140 80 0 0 1 10 100 z" fill="none" stroke="olive"></path>

</svg>

上面代码，我们在 300*200 的svg画布上通过 path 路径指令，绘制了一个自身闭合的椭圆（有没有z都是闭合的）。A 是圆弧指令，本帖不解释它的语法。代码中，我们用两个 A 指令画出向上和向下的圆弧，两个圆弧合起来就是椭圆——我们要的是椭圆的路径，它就是 d 的值。效果如下：

OK，接下来讨论如何在CSS中调用这个路径做某个对象的运动轨迹。我们先来设计一个CSS盒子，类选择器：

.mybox {

--ss: 0s;

position: absolute;

width: 20px;

height: 20px;

background: olive;

display: block;

offset-path: path("M10 100 A140 80 0 1 1 290 100 A140 80 0 0 1 10 100z");

animation: move 6s var(--ss) linear infinite;

}

.box1 { --ss: .25s; background: pink; }

.box2 { --ss: .5s; background: green; }

@keyframes move {

to { offset-distance: 100%; }

}

这个 .mybox，有一个变量 --ss: 0s; ，用于延时执行动画，首个盒子不延时（0s），.box1 是第二个盒子，延时 0.25s，第三个盒子 .box2延时 0.5s，每个盒子各有自己的背景色。路径的引用在红色代码那里，注意语法、语句。调用动画语句是绿色的代码。关键帧动画是蓝色代码部分，使用了 offset-distance，偏移到 100%。下面是HTML代码：

<span class="mybox"></span>

<span class="mybox box1"></span>

<span class="mybox box2"></span>

效果请看：

马黑黑

【附】一楼最后效果的问政代码：

1. <style>
   
2. 
   
3. #papa { margin: auto; width: 600px; height: 300px; position: relative; }
   
4. 
   
5. .mybox {
   
6.         --ss: 0s;
   
7.         position: absolute;
   
8.         width: 20px;
   
9.         height: 20px;
   
10.         background: olive;
    
11.         display: block;
    
12.         offset-path: path("M10 100 A140 80 0 1 1 290 100 A140 80 0 0 1 10 100z");
    
13.         animation: move 6s var(--ss) linear infinite;
    
14. }
    
15. 
    
16. .box1 { --ss: .25s; background: pink; }
    
17. .box2 { --ss: .5s; background: green; }
    
18. 
    
19. @keyframes move {
    
20.         to { offset-distance: 100%; }
    
21. }
    
22. 
    
23. </style>
    
24. 
    
25. <div id="papa">
    
26.         <span class="mybox"></span>
    
27.         <span class="mybox box1"></span>
    
28.         <span class="mybox box2"></span>
    
29. </div>

复制代码

马黑黑

从代码中可以看到，得到svg路径之后，HTML元素的运动根本就不再需要 svg 参与，我们前面画的椭圆路径图案只是为了演示路径。一切在CSS中完成，只需要一个 offset-path 路径、一个 offset-distance 偏移设置。

马黑黑

CSS Motion Path 规范主要属性：

① offset-path ：接收一个 svg 几何路径，作为使用该路径的对象（下称使用对象）的运动轨迹。

        语句举例：offset-path: path("M 10,50 H 210");

② offset-distance ：控制使用对象基于 offset-path 路径的距离

③ offset-position ：指定 offset-path 的初始位置(Chrome暂不支持)

④ offset-anchor ：定义使用对象基于路径的锚点（Chrome暂不支持）

⑤ offset-rotate ：定义使用对象在路径上的角度朝向，缺省时值为 auto，即能根据路径调整“车身”。

二、为了能够在web页中随意布局运动对象，建议：

① 运动对象使用 position: absolute; ，即绝对定义设定，这是保证运动对象按 offset-path 路径的基础；

② 运动对象设置 offset-distance 属性，关键帧动画配合此值进行终点目标设置。举例说明：假设我们希望使用对象在一个闭合的路径上循环绕行，我们想让它在路径的 25% 处出发，则应定义 offset-distance 为 25%，然后在 @keyframes 关键帧动画里，to 或 100% 的偏移路径设置为 125%；但非闭合路径则根据需要设定，不受此限制。

③ 可以给使用对象添加一个父元素并设定其为与路径大小（即路径所在的svg尺寸）一致、绝对定位，如此可以在web也中更方便移动运动对象到所希望的区域：仅设置父元素的left与top值便可。如果希望路径轨迹一同展现，应将svg代码也作为该父元素的子元素。举个例子：

        <div id="mama">
                <span class="mybox"></span>
                <span class="mybox box1"></span>
                <span class="mybox box2"></span>
                <svg width="300" height="200" viewBox="0 0 300 200">
                        <path d="M 10 100 A 140 80 0 1 1 290 100 A 140 80 0 0 1 10 100" fill="none" stroke="olive"></path>
                </svg>
        </div>

这里，三个 span 元素是使用路径进行运动的对象，即运动元素，随后给出svg代码。酱的话，由于使用对象和路径都包含在 mama 元素中，使用对象就会在路径轨迹上运动。

梦缘

谢谢老师的精彩分享，感谢问好！

红影

A指令看着好麻烦啊，那么多参数，而且不是一下能画出椭圆，还得分两部分画。

红影

这三个小方块原来只要做一个，其他的就用命令就可以弄出来了啊。等着下一楼的解释

马黑黑

红影 发表于 2022-9-13 16:09
这三个小方块原来只要做一个，其他的就用命令就可以弄出来了啊。等着下一楼的解释

这是将路径用到了CSS关键帧动画，类选择器 mybox 设定了 animation，只要使用了 class="mybox" 的元素，都能按 keyframes 设计的动画运行

马黑黑

梦缘 发表于 2022-9-13 15:42
谢谢老师的精彩分享，感谢问好！

同问

马黑黑

红影 发表于 2022-9-13 16:06
A指令看着好麻烦啊，那么多参数，而且不是一下能画出椭圆，还得分两部分画。

A 指令是 path 路径里最复杂的一个，除开 M 的参数不算，A 需要 7 个参数：

第一个 rx，X轴半径；
第二个 ry，Y轴半径；
第三个 x-axis-rotation，椭圆相对于坐标系的旋转角度；
第四个 large-arc-flag，标记绘制大弧(1)还是小弧(0)部分；
第五个 sweep-flag，标记向顺时针(1)还是逆时针(0)方向绘制圆弧；
第六、七个是 xy，圆弧终点坐标。

红影

马黑黑 发表于 2022-9-13 18:22
A 指令是 path 路径里最复杂的一个，除开 M 的参数不算，A 需要 7 个参数：

第一个 rx，X轴半径；

前几个参数好理解，最后的圆弧终点坐标难理解，比如你这个画半个椭圆，最后的点应该落在长轴的点上，为什么是290呢，哦，哦，我知道了，是X轴半径140要乘以2再加上前面的10，呵呵，本来看迷糊了，边问边还明白了

红影

马黑黑 发表于 2022-9-13 18:22
A 指令是 path 路径里最复杂的一个，除开 M 的参数不算，A 需要 7 个参数：

第一个 rx，X轴半径；

按你这里的参数的解说，对这个椭圆
("M10 100 A140 80 0 1 1 290 100 A140 80 0 0 1 10 100z");
X轴半径140，Y轴半径80，上下两个弧都是，然后旋转角度全是0，在然后大弧(1)还是小弧(0)这点，上半部是大弧，下半部是小弧（这个不好理解），在然后顺时针(1)还是逆时针(0)方向方面，全是顺时针。最后圆弧终点坐标，上半部落在长轴终点，下半部落在起点。

红影

马黑黑 发表于 2022-9-13 18:17
这是将路径用到了CSS关键帧动画，类选择器 mybox 设定了 animation，只要使用了 class="mybox" 的元素， ...

哦哦，知道了

马黑黑

红影 发表于 2022-9-13 21:40
哦哦，知道了

关键帧动画的说

马黑黑

红影 发表于 2022-9-13 21:25
前几个参数好理解，最后的圆弧终点坐标难理解，比如你这个画半个椭圆，最后的点应该落在长轴的点上，为什 ...

这个是很难理解的。给画的椭圆，用两个A指令，或许你可以一个一个去查看领会，慢慢来，也不好怎么解释了

马黑黑

红影 发表于 2022-9-13 21:34
按你这里的参数的解说，对这个椭圆
("M10 100 A140 80 0 1 1 290 100 A140 80 0 0 1 10 100z");
X轴半 ...

嗯，怎么说呢，参数4和5的搭配会得出四种形态的圆弧，你要两根各自分开画，慢慢体会

红影

马黑黑 发表于 2022-9-13 22:18
这个是很难理解的。给画的椭圆，用两个A指令，或许你可以一个一个去查看领会，慢慢来，也不好怎么解释了

嗯嗯，可能画几个，能更好地理解。

红影

马黑黑 发表于 2022-9-13 22:14
关键帧动画的说

这个真不错。

红影

马黑黑 发表于 2022-9-13 22:19
嗯，怎么说呢，参数4和5的搭配会得出四种形态的圆弧，你要两根各自分开画，慢慢体会

嗯，估计多动手才能真的弄明白。

马黑黑

红影 发表于 2022-9-13 22:50
这个真不错。

就是借用了svg的 path 路径，一般的CSS说明很少提及甚至只字不提