从 svg 路径计算 css 缓动函数

Question

我有一个使用 css offset-path 声明遵循 svg 路径的圆：

circle {
  offset-path: path('M-0.4-3.3l-30,50c0,0,27,79,79,79c0,0-72-32-79-170c0,0-145,86-254-40');
}'

然后我有一个带有一组关键帧的动画，用于确定该动画在动画的每个阶段应该走多远：

@keyframes circlePath {
    0% {
        offset-distance: 0%;
    }

    10% {
        offset-distance: 8.8%
    }

    56% {
        offset-distance: 25.7%
    }

    84% {
        offset-distance: 54.2%
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

如果我要在每个步骤中绘制出我想要的缓和曲线，它看起来像下面的第二张图片，并具有以下 svg 路径坐标：

<path class="st0" d="M284.4,81.3l-30,50c0,0,27,79,79,79c0,0-72-32-79-170c0,0-145,86-254-40"/>

有没有办法从该路径创建 css 缓动函数？或者换句话说，有没有办法创建多阶段贝塞尔缓动函数？

运动路径：

在路径的每一步上缓和：

Answer 1

您可以通过设置 animation-timing-function 在每个关键帧的基础上定义缓动函数。这是您的要求的简化版本，只是为了举例说明：

@keyframes circlePath {
    0% {
        offset-distance: 0%;
        animation-timing-function: ease-in;
    }

    10% {
        offset-distance: 8.8%
        animation-timing-function: linear;
    }

    56% {
        offset-distance: 25.7%
        animation-timing-function: ease-in-out;
    }

    84% {
        offset-distance: 54.2%
        animation-timing-function: ease-out;
    }

    100% {
        offset-distance: 100%;
        opacity: 0;
    }
}

您可能需要定义 cubic bezier functions 以获得您想要的精确结果。

从 svg 路径计算 css 缓动函数

calculating a css easing function from an svg path

css

svg

css-transitions

css-animations

cubic-bezier