见微知著：分析一个loading，学会一类loading-一一网

这是我参与更文挑战的第16天，活动详情查看：更文挑战

背景

公司的业务需求，需要换一个loading动画，然后截了一张图，要求就只是换成公司主题色。

公司需求就只放了一张图，这里上个动图。

如上所述，是一个很简单的动画吧。

动画分析与思路

视觉效果是看起来是在转圈圈，但是那都是视觉欺骗，相信我。

当你把另外七个圆遮起来，你就会看到它的真面目了。

上图是我手动删了其中7个圆点，剩下一个圆点之后的动画，可以看到它并没有进行任何运动，只是一个圆点在原地做着缩放与透明度的改变。

那么我们在实现的时候，也就只需要注意调整好单个圆的位置及初始属性，之后就可以完成这个效果了。

代码实现

为方便理解，这里只会写出出主要代码，并省略部分不重要的代码。

<!-- html 部分 -->

<div class="loading">
    <!-- 用emmet语法快速生成 -->
    div.load-item.delay${$i}*8
    
    <div class="load-item delay1"></div>
    ...
    <div class="load-item delay18"></div>
</div>
复制代码

.loading{
    position: absolute;
    left: 0; right: 0;
    top: 0; bottom: 0;
    margin: auto;
    width: 1px;
    height: 1px;
    
    .load-item{
        position: absolute;
        width: 12px;
        height: 12px;
        background-color: #fff;
        opacity: .3;
        border-radius: 100%;
        animation: loading 1.2s linear infinite;
    }
    .load-item:nth-child(1){ left: 0; top: -28px; }
    .load-item:nth-child(2){ left: 22px; top: -22px; }
    .load-item:nth-child(3){ left: 28px; top: 0; }
    .load-item:nth-child(4){ left: 22px; top: 22px; }
    .load-item:nth-child(5){ left: 0; top: 28px; }
    .load-item:nth-child(6){ left: -22px; top: 22px; }
    .load-item:nth-child(7){ left: -28px; top: 0; }
    .load-item:nth-child(8){ left: -22px; top: -22px; }
    @for $i from 1 through 8{
        .delay#{$i}{ animation-delay: .15 * $i + s; }
    }
    /*
       scss的循环语法，等同于
       .delay1 { animation-delay: .15s; }
       ...
       .delay8 { animation-delay: 1.2s; 
    */
}

@keyframes loading{
  0%{ transform: scale(.7); opacity: .3; }
  50%{ transform: scale(1); opacity: 1; }
  100%{ transform: scale(.7); opacity: .3; }
}
复制代码