妙用 setTimeout 实现麦克风动画效果：让小程序录音更有趣

2023-09-15 15:43:52

在小程序中，通过 setTimeout 配合 this.sedData，我们可以轻松实现麦克风录音时的动画效果，让录音过程更具趣味性和吸引力。

实现步骤

准备资源。 首先，需要准备一个麦克风图片资源，用于动画显示。
创建动画效果。 利用 setTimeout 函数配合 this.sedData 动态改变麦克风图片的 src 路径，即可生成动画效果。
控制动画播放与隐藏。 通过绑定自定义参数控制动画播放与隐藏，可以灵活地控制麦克风动画的显示时机。

具体代码

// 1. 准备资源
const micImage = 'path/to/microphone.png';

// 2. 创建动画效果
const createAnimation = () => {
  const animation = wx.createAnimation({
    duration: 1000, // 动画持续时间
    timingFunction: 'ease-in-out', // 动画曲线
  });

  // 定义动画关键帧
  animation.scale(1.2, 1.2).step(); // 放大
  animation.scale(1, 1).step(); // 缩小

  // 返回动画对象
  return animation.export();
};

// 3. 控制动画播放与隐藏
Page({
  data: {
    // 自定义参数，用于控制动画播放与隐藏
    isPlaying: false,
    // 动画对象
    animation: createAnimation(),
  },

  // 开始录音时触发
  startRecording() {
    this.setData({
      isPlaying: true,
    });

    // 启动动画
    this.animationInterval = setInterval(() => {
      this.setData({
        animation: createAnimation(),
      });
    }, 1000);
  },

  // 停止录音时触发
  stopRecording() {
    this.setData({
      isPlaying: false,
    });

    // 停止动画
    clearInterval(this.animationInterval);
  },
});