持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第1天，点击查看活动详情

写在前面

随着研发进度的推进，自研框架 V1.0 也将开始投入使用，而最后一步优化 Loading 动画是最轻松，也是最好玩的事情了，毕竟每个前端都有一个自己做 UI 设计的梦。

需求分析

那么设计个什么 Loading 动画才能显得既大气、优雅，又富有科技感呢，一共有几个方案

1、Gif 图

使用酷炫的 gif 图作为主图，加上必要的背景衬托，构造出一个炫酷的动画效果。这是第一个被 PASS 的方案，首先加载图需要时间，会影响首屏渲染，无法充分发挥 Loading 的使命。

2、使用 SVG 绘制粒子群动画

看起来还是挺酷炫的，但是有个问题是多少有点花里胡哨的感觉了，毕竟我们不只是为了酷炫，

3、使用 CSS3 构造 Loading 动画

相对于前两种，这种实现方式虽然没有 SVG 那么酷炫，但是兼顾简洁、大气，感觉上就比较符合公司的气质，相对于第一种，性能上也做到了更小的消耗，所以最终选择了第三种方案，接下来就简单看看实现方式 GIF 2022-6-1 22-23-02.gif

方案实现

定义元素结构

<template>
  <div class="Loading-container">
    <div class="inner-box">
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
      <div class="inner"></div>
    </div>
  </div>
</template>

正方体由六个面组成，由六个 div 通过选择和偏移，组成一个立体的正方体

样式

外容器样式

transform-style: preserve-3d;transform-origin: 0 0 ==> 用于启用 CSS3 3D 样式 transform: rotateX(-30deg) rotateY(45deg) translate(0,0) ==> 用于改变视角与立方体的相对位置，使立体效果能够呈现出来

.inner-box {
  position: relative;
  width: 72px;
  height: 72px;
  transform-style: preserve-3d;
  transform-origin: 0 0;
  transform: rotateX(-30deg) rotateY(45deg) translate(0,0);
}

立方体六个面样式

这里主要设置面的颜色、边框等基础样式，并没有什么特殊的设置

.inner {
  position: absolute;
  width: 72px;
  height: 72px;
  text-align: center;
  line-height: 72px;
  color: #fff;
  border-radius: 6px;
  background: rgba(255,255,255,.3);
  border: 2px solid rgba(255,255,255,.3);
}

六个面的偏移与旋转

最关键的就是这里的旋转与偏移了，如图，这里以中间绿色的容器为基础面，并标出了六个面的名称，可以看出来，“前面”以及“后面”是通过相当于容器位置前后偏移得到，样式如下

:nth-child(5) {
  transform: translateZ(36px);
  animation: 3s front infinite;
}
:nth-child(6) {
  // 旋转180deg是为了使字在外部看起来正常，不影响面的位置
  transform: rotateY(180deg) translateZ(36px);
  animation: 3s back infinite;
}

而“上面”和“下面”则是通过旋转+平移实现，以“上面”为例，首先选择 90deg 至于容器垂直，然后平移至边缘即可，样式如下

:nth-child(1) {
  transform: rotateX(90deg) translateZ(36px);
  animation: 3s top infinite;
}
:nth-child(2) {
  transform: rotateX(-90deg) translateZ(36px);
  animation: 3s bottom infinite;
}

最后剩下的“左面”和“右面”与“上下面”同理，通过选择+平移实现，样式如下

:nth-child(3) {
  transform: rotateY(90deg) translateZ(36px);
  animation: 3s left infinite;
}
:nth-child(4) {
  transform: rotateY(-90deg) translateZ(36px);
  animation: 3s right infinite;
}

最后完成的正方体如图

动画

动画一共分为两部分，容器整体动画与面的单独动画

容器动画

GIF 2022-6-1 23-51-08.gif

容器的动画主要是循环旋转，每次选择 360 deg,动画如下

.inner-box {
    animation: 3s ctn  infinite;
}
@keyframes ctn {
  from {
    transform: rotateX(-35deg) rotateY(45deg) translate(-50%,-50%);
  }
  50% {
    transform: rotateX(-35deg) rotateY(405deg) translate(-50%,-50%);
  }
  to {
    transform: rotateX(-35deg) rotateY(405deg) translate(-50%,-50%);
  }
}

六个面动画

GIF 2022-6-1 23-57-02.gif

六个面的动画主要是平移，为了展示拆开的效果，所以六个面的动画时分别向远离中心的方向平移，如下，以“上面”为例

// 其他六个面同理，省略
:nth-child(1) {
  animation: 3s top infinite;
}

@keyframes top {
  from {
    transform: rotateX(90deg) translateZ(36px);
  }
  50% {
    transform: rotateX(90deg) translateZ(36px);
  }
  75% {
    transform: rotateX(90deg) translateZ(72px);
  }
  to {
    transform: rotateX(90deg) translateZ(36px);
  }
}
@keyframes bottom {
  from {
    transform: rotateX(-90deg) translateZ(36px);
  }
  50% {
    transform: rotateX(-90deg) translateZ(36px);
  }
  75% {
    transform: rotateX(-90deg) translateZ(72px);
  }
  to {
    transform: rotateX(-90deg) translateZ(36px);
  }
}
@keyframes left {
  from {
    transform: rotateY(90deg) translateZ(36px);
  }
  50% {
    transform: rotateY(90deg) translateZ(36px);
  }
  75% {
    transform: rotateY(90deg) translateZ(72px);
  }
  to {
    transform: rotateY(90deg) translateZ(36px);
  }
}
@keyframes right {
  from {
    transform: rotateY(-90deg) translateZ(36px);
  }
  50% {
    transform: rotateY(-90deg) translateZ(36px);
  }
  75% {
    transform: rotateY(-90deg) translateZ(72px);
  }
  to {
    transform: rotateY(-90deg) translateZ(36px);
  }
}
@keyframes front {
  from {
    transform: translateZ(36px);
  }
  50% {
    transform: translateZ(36px);
  }
  75% {
    transform: translateZ(72px);
  }
  to {
    transform: translateZ(36px);
  }
}
@keyframes back {
  from {
    transform: rotateY(180deg) translateZ(36px);
  }
  50% {
    transform: rotateY(180deg) translateZ(36px);
  }
  75% {
    transform: rotateY(180deg) translateZ(72px);
  }
  to {
    transform: rotateY(180deg) translateZ(36px);
  }
}