【愚公系列】《微信小程序与云开发从入门到实践》035-在小程序中使用动画

🚀前言

随着移动互联网的快速发展，小程序以其轻便、便捷的特性，受到了越来越多用户的青睐。而在用户体验日益重要的今天，动画作为增强交互效果和视觉吸引力的重要手段，正逐渐成为小程序开发中的关键元素。

动画不仅能够让小程序的界面更加生动有趣，还可以有效引导用户的注意力，提升整体使用体验。无论是页面切换时的流畅过渡，还是按钮点击时的细腻反馈，巧妙运用动画都能为用户留下一种愉悦的感觉。

🚀一、在小程序中使用动画

🔎1.使用 WXSS 实现动画效果

在微信小程序中，组件的样式可能会随着时间变化而动态调整，例如尺寸、形状、背景色或旋转角度等。当样式发生变化时，直接替换 WXSS 样式表，变化会立即生效，但这可能导致用户体验变得突兀。为了改善这种体验，可以使用渐变动画效果，使样式的变化过程更平滑。

🦋1.1 使用 transition 实现渐变动画

通过使用 transition，可以让样式的变化过程变得平滑，产生渐变效果。下面是一个简单的例子。

☀️1.1.1 示例：使用 transition 实现渐变动画

HTML 代码（animationDemo.wxml）：

<!-- pages/animationDemo/animationDemo.wxml -->
<view class="box"></view>

WXSS 代码（animationDemo.wxss）：

/* pages/animationDemo/animationDemo.wxss */
.box {
   
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  background-color: #0000FF;
  transition: width 2s, height 2s, background-color 2s, transform 2s;
}

.box:hover {
   
  background-color: #ffcccc;
  width: 200px;
  height: 200px;
  transform: rotate(180deg);
}

解释：

• transition 属性用于定义渐变动画。此处设置了四个样式变化的渐变效果：
  • width 2s：宽度变化用时2秒
  • height 2s：高度变化用时2秒
  • background-color 2s：背景色变化用时2秒
  • transform 2s：旋转效果用时2秒
• :hover 伪类：当用户悬停在组件上时，会触发样式变化。此时，色块的宽高、背景色和旋转效果都会进行渐变。

效果：

• 当用户悬停在色块上时，会看到色块逐渐变大、颜色渐变，并且旋转180度。

🦋1.2 使用 @keyframes 定义关键帧动画

使用 @keyframes 可以创建更复杂的动画效果，支持多个动画阶段，不同于 transition 只定义开始与结束的状态。

☀️1.2.1 示例：使用 @keyframes 实现关键帧动画

WXSS 代码（animationDemo.wxss）：

/* pages/animationDemo/animationDemo.wxss */
@keyframes move {
   
  from {
   
    margin-top: 0px;
    margin-left: 0px;
    width: 100px;
  }
  50% {
   
    margin-top: 0px;
    margin-left: 200px;
    width: 50px;
  }
  75% {
   
    margin-top: 200px;
    margin-left: 200px;
    width: 50px;
  }
  to {
   
    margin-left: 0px;
    width: 100px;
  }
}

.box {
   
  border-style: solid;
  border-width: 1px;
  display: block;
  width: 100px;
  height: 100px;
  <