search
Web 技术计算机基础数据结构与算法代码设计数据分析

🗒️运动路径

animating an element along a defined path

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

  1. offset-path 定义任意形状的特定 path

  2. offset-distance 指定沿着 path 放置元素的 position，通常是通过控制该属性的值来实现动画的

  3. offset-rotate 指定元素的 orientation/direction（方向），当其沿着 path 放置的时候

  4. offset-anchor 指定元素里的一个点，让它沿着 path 移动

  5. 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%;
    }
}

hashtag
1. offset-path

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

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

hashtag
2. offset-position

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

  • auto 表示在元素框的左上角

  • normal 表示元素没有偏移起始位置，并将元素放置在包含块的 (50%, 50%) 处

  • <position> 将位置指定为 x/y 坐标，是相对于元素的 box edges。可以使用 1~4 个值来定义。

hashtag
3. path()

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

  • clip-path

  • offset-path

hashtag
4. <path>

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

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

hashtag
4.1 属性 d

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

  • 每个 command 都通过一个特定的字母来进行实例化，比如 M 10 10 表示 move 到 x 和 y 坐标

  • 所有的命令都有两种变体：大写字母指定页面上的绝对坐标，小写字母指定相对坐标

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

hashtag
4.2 画 line

有五个命令：

  1. M, m 即 move to。它通常出现在 path 的开头，用于指定绘制的起始位置

  2. L, l 即 line to，表示从 current position 到 new position 绘制一条线

  3. H, h 即 horizontal line，绘制水平线

  4. V, v 即 vertical line，绘制垂直线

  5. Z 即 close path，关闭路径（大小写没区别）

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

hashtag
4.3 画 curve

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

  1. 两种 Bézier curves

    • 三次曲线 C，Cubic curve

    • 二次曲线 Q，Quadratic curve

  2. 一种圆弧 arc（或 circle 的一部分）

hashtag
三次曲线

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

  • x1 y1 是 curve 起点的控制点

  • x2 y2 是 curve 终点的控制点

  • x y 指定 line 的结束位置

三次贝塞尔曲线 ～ 类似抛物线的圆滑曲线

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

举个例子：

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

指定的控制点显示为红色，推断的控制点显示为蓝色

hashtag
二次曲线

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

二次贝塞尔曲线 ～ 抛物线

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

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

hashtag
圆弧

hashtag
主要参考

Previous动画Next贝塞尔曲线

Last updated