[CSS] svg路径动画

1. 背景

在制作CSS动画的时候，经常会有这样的需求，
让一个方块 沿着给定的路径 运动。

如果运动路径是不规则的，通过设置top，left的属性值，就显得非常困难了。
这时候可以借助svg来实现。

2. svg的path元素

path元素的形状是通过它的 d属性 定义的，
d 属性的值，是一个“命令+参数”的序列。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <path d="M 20 30 L 160 180" />
</svg>

<style>
    svg {
        background: gray;
    }
    svg path {
        stroke: black;
        fill: none;
        stroke-width: 2;
    }
</style>

其中，M 20 30 L 160 180，包含了2个命令序列，
M 20 30，表示将画笔移动到坐标20,30处，
L 160 180，表示从画笔当前位置，到160,180位置画直线。

path元素支持多种命令，可以参考这里，curve commands

3. offset-path 与 offset-distance 属性

html元素的CSS样式属性offset-path ，表示偏移路径。
通过指定offset-path的值为path元素的d属性值，我们可以实现元素沿着给定的path路径运动。

<div class="container">
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <path d="M 20 30 L 160 180" />
    </svg>

    <div class="rect"></div>
</div>


<style>
    .container {
        position: relative;
    }

    .container svg {
        background: gray;
    }

    .container svg path {
        stroke: black;
        fill: none;
        stroke-width: 2;
    }

    .container .rect {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px; 
        background: darkred;

        offset-path: path("M 20 30 L 160 180");
        offset-distance: 20%;
    }
</style>

其中，offset-distance 指定了元素偏移初始位置的百分比。

4. 动画中设置offset-distance

通过在@keyframes中逐帧更改offset-distance，可以实现动画效果。

<div class="container">
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <path d="M 20 30 L 160 180" />
    </svg>

    <div class="rect"></div>
</div>


<style>
    .container {
        position: relative;
    }

    .container svg {
        background: gray;
    }

    .container svg path {
        stroke: black;
        fill: none;
        stroke-width: 2;
    }

    @keyframes svg-path-animation {
        from {
            offset-distance: 0%;
        }

        to {
            offset-distance: 100%;
        }
    }

    .container .rect {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px; 
        background: darkred;

        offset-path: path("M 20 30 L 160 180");
        offset-distance: 0%;
        
        animation: svg-path-animation 2s ease-in-out 0s infinite normal none;
    }
</style>

5. 任意path路径

我们修改path的d属性为M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80，
相应的也修改小方块的offset-path属性。

就可以实现小方块沿着path运动的效果了。

<div class="container">
    <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
        <path d="M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80" />
    </svg>

    <div class="rect"></div>
</div>


<style>
    .container {
        position: relative;
    }

    .container svg {
        background: gray;
    }

    .container svg path {
        stroke: black;
        fill: none;
        stroke-width: 2;
    }

    @keyframes svg-path-animation {
        from {
            offset-distance: 0%;
        }

        to {
            offset-distance: 100%;
        }
    }

    .container .rect {
        position: absolute;
        top: 0;
        left: 0;
        width: 10px;
        height: 10px; 
        background: darkred;

        offset-path: path("M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80");
        offset-distance: 0%;
        
        animation: svg-path-animation 2s ease-in-out 0s infinite normal none;
    }
</style>

参考

MDN: paths
MDN: offset-path
MDN: offset-distance
A How-to Guide to SVG Animation
Scalable Vector Graphics (SVG) 2 - Chapter 9: Paths