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缓动函数

1 个答案: