SVG——入门，路径描边动画

之前写过一篇通过路径的锚点改变实现图形变化的动画SVG——入门，路径变形动画，今天这一篇的demo是简易的类似进度条之类的图形，核心原理通过改变路径的stroke-dasharray属性，路径的虚线描边。

    .path:nth-of-type(1) {
        d: path("M5,5 305,5");
        stroke-dasharray: none;
    }

    .path:nth-of-type(2) {
        d: path("M5,35 305,35");
        stroke-dasharray: 15;
    }

    .path:nth-of-type(3) {
        d: path("M5,70 305,70");
        stroke-dasharray: 15, 5;
    }

    .path:nth-of-type(4) {
        d: path("M5,105 305,105");
        stroke-dasharray: 15,5 5,5 15,5 5,5;
    }

属性值的顺序大概就是长度，间隙长度，间隙长度，间隙...

下面开始画基础部分，外侧圆环和内侧圆圈

    <svg xmlns="http://www.w3.org/2000/svg" class="svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <!-- 外圆 -->
        <circle class="" cx="150" cy="150" r="150" fill="#5d6771" /> 
        <!-- 内圆 -->
        <circle class="" cx="150" cy="150" r="90" fill="#2f3439" />
        <!-- 圆形路径（动画本体） -->
        <circle class="mycircle" cx="150" cy="150" r="120" />
    </svg>

    .svg {
        width: 300px;
        height: 300px;
        margin: 0 auto;
        display: block;
        background: #2f3439;
    }

    .mycircle {
        fill: none;
        stroke-width: 35px;
        stroke: #fffde8;
    }

那么 stroke-dasharray属性到底怎么用呢，下面我们来试一下

stroke-dasharray:76px;

由此分析一下页头的gif图

由图中可以分析出，动画的对象就是改变 stroke-dasharray属性的长度和间隙，下面我们用animation写出基础动画，

初始状态是虚线的长度为0，间隙是整段圆环的长度，这样第二段线就看不到了，

那么怎么能计算出圆弧的周长呢？C = 2πR?

NO NO NO

let mycircle = document.querySelector('.mycircle')
console.log('mycircle的周长为' + mycircle.getTotalLength())

控制台输出753.6776123046875，我们可以取整，760

    @keyframes lineMove {
        0% {
            stroke-dasharray: 0, 760
        }

        100% {
            stroke-dasharray: 760, 760
        }
    }

animation: lineMove 4s ease-in-out 0s infinite;

大功告成，不过有点生硬，如果将线的两端变的圆润一点的话，那自然是最好不过

下面就要用到一个新的属性， stroke-linecap，线段两端的样式属性值

butt, round, square, inherit

灰色线为描边的实际长度，inherit为继承属性

在这里要讲一下拐角的属性 stroke-linejoin，属性值也是四个 miter, round, bevel, inherit

言归正传，将圆角加在咱们的代码上

    .mycircle {
        fill: none;
        stroke-width: 35px;
        stroke: #fffde8;
        stroke-dasharray:76px;
        stroke-linecap: round;
        animation: lineMove 4s ease-in-out 0s infinite;
    }

    @keyframes lineMove {
        0% {
            stroke-dasharray: 0, 760
        }

        60% {
            stroke-dasharray: 760, 760
        }
        100% {
            stroke-dasharray: 760, 760
        }
    }

一个简单的路径动画demo就写完啦！！！

SVG——入门，路径描边动画

猜你喜欢