HTML特效篇-4、一款简约的加载动画（1）

在前端系统中加入加载图案能增加用户的体验，而一款好的加载图案也能增加用户对你产品的好感，这就说明好的加载图案的重要性了。加油学起来，给你的系统带来一点点的不同！

老样子，先看看效果：

录制的时候有点掉帧了，但是在页面中显示是没有问题的。

首先我们先用 svg 画一个白色的圆。

<svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle fill="#fff" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

 

 

 那么我们继续下一步，将它变成一个圆环。

利用svg的stroke这个描边属性，将上面的白圆变成一个蓝色的圆环。

.path {
          stroke: #4285F4;  
        }

<svg width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

 

 

 接下来，为这个圆环加上绕中心转动的动画。

主要用到svg的两个属性：stroke-dasharray，stroke-dashoffset

.path {
            stroke-dasharray: 187; /*创建虚线*/
            stroke-dashoffset: 0; /*偏移量*/
            -webkit-transform-origin: center;
            -ms-transform-origin: center;
            transform-origin: center;
            stroke: #4285F4;
            -webkit-animation: dash 1.4s ease-in-out infinite;
            animation: dash 1.4s ease-in-out infinite;
        }
@-webkit-keyframes dash {
            0% {
                stroke-dashoffset: 187;
            }
            50% {
                stroke-dashoffset: 46.75;
                -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
            }
            100% {
                stroke-dashoffset: 187;
                -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
            }
        }
        @keyframes dash {
            0% {
                stroke-dashoffset: 187;
            }
            50% {
                stroke-dashoffset: 46.75;
                -webkit-transform: rotate(135deg);
                transform: rotate(135deg);
            }
            100% {
                stroke-dashoffset: 187;
                -webkit-transform: rotate(450deg);
                transform: rotate(450deg);
            }
        }

这两个的作用就是沿着圆环绘制一条圆弧路径，至于最大为什么是187呢？其实就是圆的周长，上面我们创建的圆的半径是30，所以周长约等于187.

上面主要用到了两个动画，一个是绘制动画，一个是旋转动画，两者是同时进行的，这样一个简单的选择加载图案就实现了。

不过看起来是断断续续的，没有丝滑的感觉。那是因为在圆旋转的时候，部分内容被外面的裁剪掉了，简单的解决方法，我们只需要让外面跟着一起转就好了。

给外面的svg加上旋转动画：

.spinner {
            -webkit-animation: rotator 1.4s linear infinite;
            animation: rotator 1.4s linear infinite;
        }

        @-webkit-keyframes rotator {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
            }
        }

        @keyframes rotator {
            0% {
                -webkit-transform: rotate(0deg);
                transform: rotate(0deg);
            }
            100% {
                -webkit-transform: rotate(270deg);
                transform: rotate(270deg);
            }
        }

<svg class="spinner" width="65px" height="65px" viewBox="0 0 66 66" xmlns="http://www.w3.org/2000/svg">
    <circle class="path" fill="none" stroke-width="6" stroke-linecap="round" cx="33" cy="33" r="30"></circle>
</svg>

效果：

接下来加上颜色渐变就好了。

颜色渐变的动画：

@-webkit-keyframes colors {
            0% {
                stroke: #4285F4;
            }
            25% {
                stroke: #DE3E35;
            }
            50% {
                stroke: #F7C223;
            }
            75% {
                stroke: #1B9A59;
            }
            100% {
                stroke: #4285F4;
            }
        }

        @keyframes colors {
            0% {
                stroke: #4285F4;
            }
            25% {
                stroke: #DE3E35;
            }
            50% {
                stroke: #F7C223;
            }
            75% {
                stroke: #1B9A59;
            }
            100% {
                stroke: #4285F4;
            }
        }

path中加上：

.path {
            .....
            -webkit-animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
            animation: dash 1.4s ease-in-out infinite, colors 5.6s ease-in-out infinite;
        }

好了，本期内容就讲到这里，下期再见。