【愚公系列】《微信小程序与云开发从入门到实践》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;
  background-color: #0000FF;
  animation-duration: 3s;
  animation-name: move;
  animation-iteration-count: infinite;
}

解释：

• @keyframes move 定义了一个名为 move 的关键帧动画：
  • from：动画开始时的样式。
  • 50%：动画进行到一半时的样式。
  • 75%：动画进行到四分之三时的样式。
  • to：动画结束时的样式。
• animation-duration: 3s：动画持续时间为3秒。
• animation-name: move：指定使用的关键帧动画名称。
• animation-iteration-count: infinite：动画将无限循环播放。

效果：

• 页面上的色块将按照设置的关键帧路径进行循环动画。

🦋1.3 动画控制属性

在 WXSS 中，可以使用以下属性来控制动画的行为：

🦋1.4 事件监听动画过程

你可以为动画添加事件监听器，以便在动画的不同阶段执行相应的操作。下面是一些常用的动画事件：

• bindtransitionend：当 transition 动画结束时触发。
• bindanimationstart：当关键帧动画开始时触发。
• bindanimationiteration：当关键帧动画的某一循环结束时触发。
• bindanimationend：当关键帧动画结束时触发。

☀️1.4.2 示例：绑定动画事件

HTML 代码（animationDemo.wxml）：

<!-- pages/animationDemo/animationDemo.wxml -->
<view class="box" bindtransitionend="transitionend"
      bindanimationstart="animationstart"
      bindanimationiteration="animationiteration"
      bindanimationend="animationend"></view>

JavaScript 代码（animationDemo.js）：

// pages/animationDemo/animationDemo.js
Page({
  transitionend: function () {
    console.log("transition 渐变动画执行结束");
  },
  animationstart: function () {
    console.log("关键帧动画开始");
  },
  animationiteration: function () {
    console.log("关键帧阶段完成");
  },
  animationend: function () {
    console.log("关键帧动画结束");
  }
});

效果：

• 在动画的不同阶段，控制台会输出相应的日志，帮助你调试和控制动画过程。

🔎2.使用小程序框架接口创建动画效果

在微信小程序中，除了通过 WXSS 来定义样式和动画外，还可以利用小程序提供的动画 API 来创建动态效果。使用这些 API，可以更加灵活地控制动画，并且可以不依赖于 WXSS 文件来实现关键帧动画。

🦋2.1 使用 animate 方法创建动画

通过小程序的 animate 方法，可以在页面元素上应用动画效果。这个方法接受四个参数：

• 元素选择器：选择需要执行动画的元素。
• 动画关键帧列表：定义动画的关键帧，即动画过程中各个时间点的样式。
• 动画时长：设置动画执行的时间（以毫秒为单位）。
• 回调函数：动画结束后执行的回调函数，可以在其中处理动画结束后的清理工作。

☀️2.1.1 示例：点击事件触发动画

JavaScript 代码（animationDemo.js）：

// pages/animationDemo/animationDemo.js
Page({
  tapEvent: function() {
    this.animate(".box", [
      { width: '100px', height: '100px', backgroundColor: '#0000FF' },
      { backgroundColor: '#ffcccc', width: '200px', height: '200px', transform: 'rotate(180deg)' }
    ], 500, () => {
      this.clearAnimation(".box");
    });
  }
});

解释：

• .box：选择器，指定要应用动画的元素。
• 动画关键帧：通过数组定义关键帧，其中每个对象包含了要应用的样式。
  • 第一个关键帧：定义初始状态，width: '100px', height: '100px', backgroundColor: '#0000FF'。
  • 第二个关键帧：定义动画结束时的样式，backgroundColor: '#ffcccc', width: '200px', height: '200px', transform: 'rotate(180deg)'。
• 500：动画时长为500毫秒。
• 回调函数：在动画完成后，调用 clearAnimation 方法来清除动画效果。

运行效果：

点击页面中的色块时，色块将会执行一个渐变动画，宽高变化、背景色变化，并旋转180度。

🦋2.2 animate 方法的关键帧属性

animate 方法中的关键帧数组对象支持许多不同的属性，类似于 CSS 样式，下面是一些常用的动画属性：

这些属性可以组合使用，创建复杂的动画效果。

🦋2.3 clearAnimation 方法

clearAnimation 方法用于清除已应用的动画效果，可以在动画执行完毕后调用。它接受三个参数：

• 选择器：指定要清除动画的元素。
• 清除选项（可选）：一个对象，用于指定要清除的特定动画属性。如果不传递该参数，则会清除所有动画属性。
• 回调函数（可选）：清除动画后的回调函数。

☀️2.3.1 示例：清除动画效果

this.clearAnimation(".box", {}, () => {
  console.log("动画已清除");
});

此时，clearAnimation 会清除 .box 元素上的所有动画效果，且在清除完毕后执行回调函数。

🔎3.交互式动画

大多数动画效果是独立于用户交互的，即动画的执行不会受到用户操作的直接影响。然而，在一些场景中，基于用户交互的动画非常重要。例如，可以根据用户对页面的滚动行为来控制动画的执行。

在小程序开发框架中，animate 方法提供了一个功能，可以在用户滚动时驱动动画的执行。通过将 animate 方法的第四个参数配置为一个对象，你可以实现这种基于滚动交互的动画效果。

🦋3.1 实现滚动驱动的动画

为了实现滚动驱动的动画，需要使用 scroll-view 组件并为其设置一个固定的高度。在用户滚动 scroll-view 时，页面元素的动画效果会根据滚动的进度变化。

☀️3.1.1 示例：实现滚动驱动的动画

animationDemo.wxml 文件：

<!-- pages/animationDemo/animationDemo.wxml -->
<view class="box"></view>
<scroll-view scroll-y="{{true}}" class="scroll">
  <view style="margin-top: 20px; font-size: 60px;">占位数据</view>
  <view style="margin-top: 20px; font-size: 60px;">占位数据</view>
  <view style="margin-top: 20px; font-size: 60px;">占位数据</view>
  <view style="margin-top: 20px; font-size: 60px;">占位数据</view>
  <view style="margin-top: 20px; font-size: 60px;">占位数据</view>
  <view style="margin-top: 20px; font-size: 60px;">占位数据</view>
  <view style="margin-top: 20px; font-size: 60px;">占位数据</view>
  <view style="margin-top: 20px; font-size: 60px;">占位数据</view>
</scroll-view>

解释：

• scroll-view 组件用于创建一个可以滚动的区域，必须为其设置固定的高度（例如 300px）。
• 页面中添加了一些占位数据，模拟内容的滚动。

animationDemo.wxss 文件：

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

.scroll {
  height: 300px;
}

解释：

• .box 是动画的目标元素，初始状态为宽高 100px，背景色为蓝色。
• .scroll 为 scroll-view 组件，设置了一个固定的高度 300px。

🦋3.2 在 onReady 生命周期方法中添加动画

在页面的 onReady 生命周期方法中，通过 animate 方法为 .box 元素设置基于滚动驱动的动画。

animationDemo.js 文件：

// pages/animationDemo/animationDemo.js
Page({
  onReady: function() {
    this.animate(".box", [
      { width: '100px', height: '100px', backgroundColor: '#0000FF' },
      { backgroundColor: '#FFCCCC', width: '200px', height: '200px', transform: 'rotate(180deg)' }
    ], 500, {
      scrollSource: '.scroll',             // 绑定交互动画的 scroll-view 组件
      timeRange: 1000,                     // 起始和结束滚动范围映射的时间长度
      startScrollOffset: 0,                // 滚动偏移量的起点
      endScrollOffset: 400,                // 滚动偏移量的终点
      orientation: 'vertical'              // 设置滚动方向，'vertical' 为竖直方向
    });
  }
});

解释：

• scrollSource: '.scroll'：指定滚动视图 (scroll-view) 作为动画触发的源。
• orientation: 'vertical'：设置滚动方向为垂直（竖直方向）。如果要使用水平滚动，可以设置为 'horizontal'。
• startScrollOffset: 0：滚动的起始偏移量，单位为像素，这里设置为 0。
• endScrollOffset: 400：滚动的结束偏移量，单位为像素，这里设置为 400。
• timeRange: 1000：设置滚动偏移量的映射时间长度，单位为毫秒，即动画执行的时间。

🦋3.3 滚动驱动的动画效果

当用户滚动 scroll-view 时，.box 元素的宽度、背景色、旋转角度等会根据滚动进度逐渐发生变化。例如，在滚动开始时，.box 的宽度为 100px，背景色为蓝色，随着滚动的进行，.box 的宽度会变为 200px，背景色变为粉红色，且旋转 180 度。

在设置滚动驱动的动画时，可以配置以下属性：