🗒️运动路径

animating an element along a defined path

CSS Motion Path 模块可以让任何图形对象沿着自定义 path 运动。

offset-path 定义任意形状的特定 path
offset-distance 指定沿着 path 放置元素的 position，通常是通过控制该属性的值来实现动画的
offset-rotate 指定元素的 orientation/direction（方向），当其沿着 path 放置的时候
offset-anchor 指定元素里的一个点，让它沿着 path 移动
offset-position 定义元素沿 path 的初始位置

以上属性，一起控制着元素沿 path 的 position 和 orientation。offset 是它们的缩写。

<div id="motion-demo"></div>

#motion-demo {
    offset-path: path("M20,20 C20,100 200,0 200,100");
    animation: move 3000ms infinite alternate ease-in-out;
    width: 40px;
    height: 40px;
    background: lightseagreen;
}

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

1. `offset-path`

该属性指定元素要遵循的 path，并确定元素的位置，在 path 的 parent container 或 SVG 坐标系中。

在规范的早期版本中，该属性被称为 motion-path，后被改为 offset-path，因为它描述的是 static positions（静态位置）而不是 motion（运动）。

/* URL */
offset-path: url(#myCircle);

/* Basic shape */
offset-path: circle(50% at 25% 25%);
offset-path: ellipse(50% 50% at 25% 25%);
offset-path: inset(50% 50% 50% 50%);
offset-path: polygon(30% 0%, 70% 0%, 100% 50%, 30% 100%, 0% 70%, 0% 30%);
offset-path: path("M 0,200 Q 200,200 260,80 Q 290,20 400,0 Q 300,100 400,200");

/* Coordinate box */
offset-path: content-box;
offset-path: padding-box;
offset-path: border-box;
offset-path: fill-box;
offset-path: stroke-box;
offset-path: view-box;

/* Line segment */
offset-path: ray(45deg closest-side contain);
offset-path: ray(contain 150deg at center center);
offset-path: ray(45deg);

2. `offset-position`

定义元素沿 path 的初始位置。offset starting position，偏移起始位置。

auto 表示在元素框的左上角
normal 表示元素没有偏移起始位置，并将元素放置在包含块的 (50%, 50%) 处
<position> 将位置指定为 x/y 坐标，是相对于元素的 box edges。可以使用 1~4 个值来定义。

/* Keyword values */
offset-position: normal;
offset-position: auto;
offset-position: top;
offset-position: bottom;
offset-position: left;
offset-position: right;
offset-position: center;

/* <percentage> values */
offset-position: 25% 75%;

/* <length> values */
offset-position: 0 0;
offset-position: 1cm 2cm;
offset-position: 10ch 8em;

/* Edge offsets values */
offset-position: bottom 10px right 20px;
offset-position: right 3em bottom 10px;
offset-position: bottom 10px right;
offset-position: top right 10px;

3. `path()`

CSS 函数 path() 接受一个 SVG path 字符串以绘制形状，可用于 CSS Shapes 和 CSS Motion Path。

clip-path
offset-path

path("M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
path(evenodd,"M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");

4. `<path>`

该元素用来创建 line（直线）、curve（曲线）、arc（圆弧）等形状。

要绘制 SVG，理解 path 很重要。

4.1 属性 `d`

<path> 元素的形状由其属性 d 来定义，该属性包含了一系列的 commands 和 parameters。

每个 command 都通过一个特定的字母来进行实例化，比如 M 10 10 表示 move 到 x 和 y 坐标
所有的命令都有两种变体：大写字母指定页面上的绝对坐标，小写字母指定相对坐标

d 属性中的坐标始终没有单位，因此是位于用户坐标系中。当然，我们还可以转换路径以满足其它需求。

4.2 画 line

有五个命令：

M, m 即 move to。它通常出现在 path 的开头，用于指定绘制的起始位置
L, l 即 line to，表示从 current position 到 new position 绘制一条线
H, h 即 horizontal line，绘制水平线
V, v 即 vertical line，绘制垂直线
Z 即 close path，关闭路径（大小写没区别）

<path d="M 10 10 H 90 V 90 H 10 L 10 10"/>
<path d="M 10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
<path d="M 10 10 h 80 v 80 h -80 Z" fill="transparent" stroke="black"/>

Z 命令从 current position 绘制一条回到 path 起点的线。通常放在 path node 的末尾，但并非总是如此。

4.3 画 curve

有三个命令，用来创建 smooth curve（平滑曲线）：

两种 Bézier curves
- 三次曲线 C，Cubic curve
- 二次曲线 Q，Quadratic curve
一种圆弧 arc（或 circle 的一部分）

三次曲线

三次曲线是稍微复杂的曲线。三次贝塞尔曲线的每个点都有两个控制点，因此要创建三次贝塞尔曲线（要画一个点、要画一段三次曲线），就需要指定三组坐标：

x1 y1 是 curve 起点的控制点
x2 y2 是 curve 终点的控制点
x y 指定 line 的结束位置

控制点本质上描述了从每个点开始的 line 的斜率，然后贝塞尔函数会创建一条平滑的曲线，从 line 起点处建立的斜率转移到另一端的斜率。曲线从第一个 control point 的方向开始，然后弯曲，使其沿着第二个 control point 的方向到达。

C x1 y1, x2 y2, x y
c dx1 dy1, dx2 dy2, dx dy

举个例子：

<path d="M 10 10 C 20 20, 40 20, 50 10" stroke="black" fill="transparent"/>

多条贝塞尔曲线可以串在一起以创建延伸、平滑的形状。通常，点一侧的控制点将是另一侧使用的控制点的反映，以保持坡度恒定。在这种情况下，可以使用三次贝塞尔曲线的快捷版本 S：

S x2 y2, x y
s dx2 dy2, dx dy

<path d="M 10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" stroke="black" fill="transparent"/>

二次曲线

二次曲线比三次曲线简单点，它需要一个 control point 来确定曲线在起点和终点的斜率。

二次曲线有两个参数：control point 和终点。

Q x1 y1, x y
q dx1 dy1, dx dy

<path d="M 10 80 Q 95 10 180 80" stroke="black" fill="transparent"/>

与三次贝塞尔曲线一样，也有一个将多个二次贝塞尔曲线串在一起的快捷方式 T。仅当前一个命令是 Q 或 T 时，该命令才有效。如果不是，则假定控制点与前一个点相同，并且仅绘制线条。

T x y
t dx dy

<path d="M 10 80 Q 52.5 10, 95 80 T 180 80" stroke="black" fill="transparent"/>

圆弧

主要参考

Previous动画 Next贝塞尔曲线

Last updated 1 year ago

1. offset-path

2. offset-position

3. path()

4. <path>

4.1 属性 d