2

offset-path我有一个使用 css声明遵循 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 缓动函数？或者换句话说，有没有办法创建一个多阶段贝塞尔缓动函数？

运动路径： 运动路径

在路径进展的每一步缓和：

在路径进展的每一步缓和

4

1 回答 1

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;
    }
}

您可能需要定义三次贝塞尔函数以获得所需的精确结果。

于 2018-05-25T14:11:52.153 回答