小程序中简单 Loading 效果关键帧动画

在小程序开发中，Loading 动画是提升用户体验的重要细节。它不仅能缓解用户等待时的焦虑感，还能让界面显得更加生动、专业。而实现这些动效，并不需要复杂的第三方库------仅用 CSS 的 @keyframes 关键帧动画，就能轻松完成。

本文将通过两个经典示例，带你掌握小程序中实现简单 Loading 动效的核心思路：

1. 旋转式 Loading 动画（如加载图标旋转）
2. 呼吸灯式 Loading 动画（如星星闪烁缩放）

---

一、前端做动效的简单思路

在开始写代码前，先明确几个通用原则：

• ✅ 优先使用 transform 和 opacity：这两个属性不会触发页面重排（reflow），性能高，动画更流畅。
• ✅ 用 @keyframes 定义动画过程：描述"从什么状态 → 到什么状态"。
• ✅ 用 animation 属性控制播放方式：包括时长、循环次数、缓动函数、延迟等。
• ✅ 小程序支持标准 CSS3 动画 ：.wxss 文件中可直接使用 @keyframes、transform、animation 等。

接下来，我们通过两个典型 Loading 动效来实践这些思路。

---

二、1. 旋转式 Loading 动画（图标持续旋转）

这是最常见的 Loading 效果，比如一个圆形箭头或齿轮图标不断旋转。

🎯 动画目标

让 <image> 元素匀速、无限地旋转一圈（360°）。

🔧 实现代码

/* 定义旋转动画 */
@keyframes rotateAnimation {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 应用到图片 */
.loading-rotate {
  width: 40rpx;
  height: 40rpx;
  animation: rotateAnimation 1s infinite linear;
}

<!-- WXML -->
<image class="loading-rotate" src="/images/spinner.png" />

📌 关键点解析

• rotate(0deg) → rotate(360deg)：形成完整一圈旋转；
• animation: ... 1s infinite linear：
  • 1s：每秒转一圈；
  • infinite：无限循环；
  • linear：匀速旋转（无加速/减速），视觉更稳定；
• 360° 与 0° 视觉一致，因此循环无缝。

💡 适用于：数据加载、提交中、网络请求等待等场景。

---

三、2. 呼吸灯式 Loading 动画（星星缩放+透明度变化）

这种效果更柔和、有"生命力"，常用于引导页、星空背景或轻量级提示。

🎯 动画目标

让星星图标周期性地"变大变亮 → 变小变暗"，模拟呼吸节奏。

🔧 实现代码

/* 定义呼吸动画 */
@keyframes starBreath {
  0%,
  100% {
    opacity: 0.35;
    transform: scale(0.92);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 第一颗星星 */
.loading_star_1 {
  position: absolute;
  left: 134rpx;
  top: 18rpx;
  width: 42rpx;
  height: 42rpx;
  animation: starBreath 1.6s ease-in-out infinite;
}

/* 第二颗星星（错峰启动） */
.loading_star_2 {
  position: absolute;
  left: 180rpx;
  top: 2rpx;
  width: 32rpx;
  height: 32rpx;
  animation: starBreath 1.6s ease-in-out infinite;
  animation-delay: 0.4s; /* 延迟启动 */
}

<!-- WXML -->
<view class="loading-container">
  <image class="loading_star_1" src="/images/star.png" />
  <image class="loading_star_2" src="/images/star.png" />
</view>

📌 关键点解析

• 双状态设计：0%/100%（小而暗） ↔ 50%（大而亮）；
• ease-in-out 缓动：让缩放和透明度变化更自然，符合"呼吸"节奏；
• animation-delay 错峰：多元素之间不同步，避免呆板，增强动感；
• 使用 rpx 单位：完美适配小程序屏幕。

💡 适用于：启动页装饰、轻提示、情感化设计等场景。

---

四、总结

动效类型	核心属性	特点	适用场景
旋转 Loading	transform: rotate()	简洁、高效、通用	数据加载、提交中
呼吸灯 Loading	transform: scale() + opacity	柔和、灵动、有节奏感	引导页、装饰动画

通过这两个例子可以看出：小程序中的动效并不复杂 。只要掌握 @keyframes + animation 的组合，再配合高性能的 CSS 属性，就能用极简代码实现优雅的 Loading 效果。