圆形扩散特效的实现

需求分述：

• 因为我们进入小程序时，需要静默登录，也就是说，在进入时，直接去拿用户相关信息，且做这个操作是用户无感的，这样的话，请求有可能会时间久，用户等着不太好，所以做一个这样的页面去改变用户的感受

实现效果：

假装这是一个动态的图，在此非常感谢我家帅气的模特

功能实现分析：

1. 首先圆要动，一大一小，说明我们在运动时需要改变的是圆的大小，那就是width、height
2. 第二我们在圆在动的过程中，随着变大变小，那距父元素的top、left也变小，所以left、top也会改变
3. 我们看在圆最小是，那颜色是最重的，变越大，颜色越没有，所以我们改变他的opacity透明度。
4. 最主要的是，我们看到两个圆是一大一小嘛，也就是运动时，他俩不可同一运动时间，不然就一样大小了，所以我们在统一设置时间后，给第二个单独设置时间，且应与第一个有一段明显的时间差。有了这四点，我们接下来就可以写代码了。

代码实现：

WXML

<view class="loading">
    <view class="box">
        <view class="action">
            <image src="../../static/image/logo.png" />
            <view class="children-view"></view>
            <view class="children-view"></view>
        </view>
    </view>
</view>

WXSS

/**
*因为我们圆是从大到小，所以我们改变其width、height。
*但是随着圆变大变小，距父元素的距离也随之变小，所以我们相对改变其的top、left。
*大家还看到圆的颜色也发生变化，这样我们就改变其透明度也就是opacity
**/
@keyframes action {
  0% {
    top: 294rpx;
    left: 294rpx;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 57rpx;
    left: 57rpx;
    width: 474rpx;
    height: 474rpx;
    opacity: 0;
  }
}
.loading {
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  height: 100vh;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.loading .box {
  width: 600rpx;
  height: 600rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.loading .box .action image {
  position: absolute;
  width: 100rpx;
  height: 100rpx;
  top: 245rpx;
  left: 245rpx;
  z-index: 10;
}
.loading .box .action .children-view {
  position: absolute;
  border: 2rpx solid #e31937;
  border-radius: 50%;
  opacity: 1;
  animation: action 1.69491525s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loading .box .action .children-view:nth-child(2) {
  animation-delay: -0.84745763s;
}
/**
*大家看到这里，我先定义了一个运动的时间，因为我们需要实现两种圆交替的效果，所以我们需要改变第二个圆的运动时间。
**/