路径动画

CSS 路径动画（也称为 offset-path 动画）是一种独特而引人注目的技术，它使你可以在 Web 上创建令人印象深刻的动效

在 CSS 中，我们主要使用 CSS 的 offset （它是 offset-position 、offset-path 、offset-distance 、offset-rotate 和 offset-anchor 等属性的简写）来实现路径动画。其中，最核心的是 offset-path 属性，它定义了动画元素将要淍着的路径。你可以将这个路径定义为一个基本形状（如圆形或椭圆形）、一个 SVG 路径或一个自定义路径。然后，使用 offset-distance 、offset-rotate 等属性，你可以进一步控制动画元素在路径上的行为，如其在路径上的位置、旋转角度和动画速度等。

一、如何制作一个简单的路径动画

我们先从一个简单的路径动画效果开始，看看 offset 属性是如何实现路径动画的。你可以按照以下步骤进行。

首先，你需要一个动画元素，例如：



<div class="animated-element"></div>

接着你需要一个路径，假设你有一条看起来像下面这样的一条曲线路径：

它是一条 SVG 的路径（path）：



<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 515.8 168.1">    <path stroke="#000" stroke-miterlimit="10" d="M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0" fill="transparent"/></svg>

你现在可以在 CSS 中给元素设置基本样式和使用 CSS 的 offset 属性来控制路径动画：


@keyframes moveAlongPath {
    from {
        offset-distance: 0%;
    }
    to {
        offset-distance: 100%;
    }
}

.animated-element {
    width: 24px;
    aspect-ratio: 1;
    position: absolute;
    top: 0;
    left: 0;
    
    offset-path: path('M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0');
    offset-distance: 0%;
    animation: moveAlongPath 2000ms linear infinite alternate;
}

上面代码中，设置了动画元素（.animated-element）的基本样式，包括宽度、高度和位置等。我们使用了 position: absolute 将元素的定位设置为绝对定位，以便于在路径上自由移动。

使用 animation 属性来定义动画效果，包括动画名称（moveAlongPath）、动画持续时间（2000ms）、动画速度曲线（linear）和动画播放次数（无限循环播放 infinite）。

使用 offset-path 属性来定义路径，示例中使用了 path() 函数来描述路径（它是 SVG 中 <path> 元素的 d 属性的值）。在这个示例中，它是一条曲线 path('M.4 84.1s127.4 188 267.7 0 247.3 0 247.3 0') 。

最后，使用 offset-distance 属性来控制元素在路径上的位置。在这个示例中，我们在关键帧中逐渐改变 offset-distance 的值，以实现元素沿路径来回移动。

二、CSS 路径动画特性：offset

CSS 的 offset 属性就是用来控制动画元素在路径上的位置。它主要包括以下几个子属性：

offset-path：用于指定动画元素沿着的路径，即动画路径。这个路径可以是简单的形状，如 circle()、ellipse()，也可以是复杂的贝塞尔曲线或 SVG 路径。你可以通过设置 offset-path 来定义动画元素要沿着哪条路径移动

offset-distance：指定动画元素在路径上的位置。可以将其看作是动画元素沿路径的偏移量。通过设置offset-distance，你可以控制动画元素在路径上的位置，从而实现动画元素沿路径移动的效果

offset-rotate：控制动画元素在路径上的旋转方向。它用于指定动画元素在路径上的旋转角度，使动画元素可以根据路径的方向自动旋转

offset-anchor：指定动画元素的锚点，即动画元素与路径的连接点。它可以用于调整动画元素与路径之间的对齐方式，从而影响动画元素在路径上的位置

offset-position ：指定动画元素在其包含块内的初始位置。它可以用于调整动画元素沿着路径移动的起始位置。