vue 多种加载动画详解

优雅加载动画详解

在现代 Web 应用中，加载动画是一种常用的 UI 反馈，能够有效提示用户等待进程的状态，从而提升用户体验。本文将详细介绍几种常见的加载动画实现方式，并探讨其原理。此外，还会介绍一些现成的 CSS 动画库，帮助你快速实现更多样化的加载效果。

什么是加载动画？

加载动画的主要作用是展示给用户一个视觉反馈，告知当前有操作正在进行，特别是在用户等待数据加载或页面切换时。这些动画通过简洁的视觉提示，如旋转、跳动、渐变等，传达“等待”的概念，缓解用户因等待而产生的焦虑感。

常见的优雅加载动画

1. 圆形波浪动画

原理解析：

这个动画使用了 @keyframes 定义的动画关键帧，通过渐变的方式让圆形逐渐放大并变得透明。波浪动画的实现依赖于两个圆形 div 元素交替动画。通过 cubic-bezier 函数，可以控制动画的节奏，使其更为平滑和自然。

代码语言：css复制

.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.wave-spinner {
  position: relative;
  width: 40px;
  height: 40px;
}

.wave-spinner div {
  position: absolute;
  border: 4px solid #008750;
  opacity: 1;
  border-radius: 50%;
  animation: wave 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}

.wave-spinner div:nth-child(2) {
  animation-delay: -0.5s;
}

@keyframes wave {
  0% {
    top: 36px;
    left: 36px;
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    top: 0px;
    left: 0px;
    width: 72px;
    height: 72px;
    opacity: 0;
  }
}

HTML:

代码语言：html复制

<view class="loading-container">
  <view class="wave-spinner">
    <div></div>
    <div></div>
  </view>
</view>

优点：圆形波浪动画给人一种柔和的视觉效果，适用于需要一种流畅、无缝的加载体验的应用场景。

---

2. 脉动圆形加载动画

原理解析：

脉动动画通过不断缩放和恢复的效果，模拟了类似心跳的脉动感。该动画通过 transform: scale() 属性对元素进行缩放，同时配合 opacity 属性的变化，呈现出有节奏的脉动效果。

代码语言：css复制

.pulse-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.pulse {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: #008750;
  animation: pulse-animation 1.2s infinite ease-in-out;
}

@keyframes pulse-animation {
  0% {
    transform: scale(0.95);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 1;
  }
  100% {
    transform: scale(0.95);
    opacity: 0.7;
  }
}

HTML:

代码语言：html复制

<view class="pulse-spinner">
  <view class="pulse"></view>
</view>

优点：脉动动画简单优雅，适合在中小型图标或按钮上使用，给人以“心跳”或“呼吸”的动态感觉。

---

3. 跳动的点加载动画

原理解析：

该动画依赖于多个小圆点依次跳动来展示加载的状态。每个圆点通过 translateY 属性来实现上下的跳动，同时不同圆点具有不同的动画延迟 (animation-delay) 使其依次出现跳动效果。

代码语言：css复制

.dots-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.dot {
  width: 10px;
  height: 10px;
  margin: 3px;
  border-radius: 50%;
  background-color: #008750;
  animation: bounce 1.5s infinite ease-in-out both;
}

.dot:nth-child(1) {
  animation-delay: -0.32s;
}
.dot:nth-child(2) {
  animation-delay: -0.16s;
}

@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

HTML:

代码语言：html复制

<view class="dots-spinner">
  <view class="dot"></view>
  <view class="dot"></view>
  <view class="dot"></view>
</view>

优点：跳动的小点动画是一种轻量级的加载方式，常用于加载时间较短的操作，如小型数据的请求。

---

4. 旋转方块动画

原理解析：

该动画通过 rotate 属性旋转方块，并通过 transform 关键帧控制方块的旋转角度。方块在旋转的过程中，通过平滑过渡的 ease-in-out 使其动作柔和流畅。

代码语言：css复制

.square-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.square {
  width: 20px;
  height: 20px;
  background-color: #008750;
  animation: rotate 1.2s infinite ease-in-out;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  50% {
    transform: rotate(180deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

HTML:

代码语言：html复制

<view class="square-spinner">
  <view class="square"></view>
</view>

优点：旋转方块动画能够清晰展示动作轨迹，适合在处理更复杂或加载时间较长的操作时使用。

---

使用 CSS 动画库

除了手动编写 CSS 动画，你还可以使用现成的 CSS 动画库来实现更多复杂的加载效果：

• SpinKit: 这个库提供了多种预定义的加载动画，易于集成并支持多种浏览器。
• Animate.css: Animate.css 提供了丰富的动画效果，适合在 Web 项目中快速应用不同的动画风格。

总结

加载动画是用户体验中的重要元素，通过使用合适的动画，能够有效提升用户对系统响应的感知。本文展示了几种常见的加载动画及其 CSS 实现，帮助你根据项目需求选择和实现优雅的加载动画。如果需要更复杂的效果，也可以借助如 SpinKit 和 Animate.css 等第三方库来实现。