微信小程序实现数字滚动动画

实现数字滚动动画需要用到小程序中的 animation 和 setData 方法，具体步骤如下：

1. 页面结构

在 wxml 文件中，需要准备一个数字占位符，以及一个用于显示数字的文本框。

<view class="number-placeholder">{{ number }}</view>
<view class="number-display">{{ displayNumber }}</view>

其中，.number-placeholder 类用于占位置，.number-display 类用于显示数字。为了让文本框看起来更美观，可以给它添加一些样式：

.number-display {
  font-size: 32px;
  color: #ff6886;
  font-weight: bold;
}

2. 动画实现

在 js 文件中，定义一个 animation 对象，并设置初始状态。同时，定义一个用于显示的数字和一个计时器，初始值都为 0。

Page({
  data: {
    number: 1234567890,
    displayNumber: 0,
    timer: null,
    animationData: null,
  },

  onLoad: function () {
    // 初始化 animation 对象
    let animation = wx.createAnimation({
      duration: 1000,
      timingFunction: "linear",
    });
    this.setData({
      animationData: animation.export(),
    });
  },
});

接下来，在 onShow 方法中启动计时器，每隔一段时间更新显示数字。

onShow: function () {
  this.startTimer();
},

startTimer: function () {
  let that = this;
  let step = 7890;
  let count = 0;

  that.setData({ displayNumber: 0 });

  let timer = setInterval(function () {
    count++;
    if (count > step) {
      clearInterval(that.data.timer);
      return;
    }
    let newNumber = Math.ceil(that.data.number * (count / step));
    that.setData({ displayNumber: newNumber });
  }, 10);

  that.setData({ timer: timer });
},

在计时器中，我们首先将显示数字 displayNumber 设为 0，然后每隔 10 毫秒更新一次数字，更新的值为原始数字乘以 0 到 1 之间的比例。这样，则会让显示数字从 0 逐渐增加到原始数字。

接下来，我们将动画与数字绑定，实现数字的滚动效果。在计时器中，添加如下代码：

  let animation = wx.createAnimation({
    duration: 1000,
    timingFunction: "linear",
  });
  animation
    .top("-60rpx")
    .step()
    .top("0")
    .step({ duration: 0 });
  that.setData({
    animationData: animation.export(),
  });

此段代码首先创建一个 animation 对象，并设置动画效果为线性。然后，我们在 1 秒钟内将文本框向上移动 60 像素，并将动画段的状态保存到 animationData 中。动画结束后，将文本框移回原位置，duration: 0 表示这是一个瞬间完成的动画。

3. 示例说明

示例一：带有参数的动画函数

在实际开发中，可以封装一个带有参数的动画函数，方便复用。下面是一个示例：

    function animateNumber(number, duration) {
      let that = this;
      let step = duration / 10;
      let count = 0;
      let animation = wx.createAnimation({
        duration: duration,
        timingFunction: "linear",
      });

      that.setData({ displayNumber: 0 });

      let timer = setInterval(function () {
        count++;
        if (count > step) {
          clearInterval(that.data.timer);
          return;
        }
        let newNumber = Math.ceil(number * (count / step));
        that.setData({ displayNumber: newNumber });
      }, 10);

      animation
        .top("-60rpx")
        .step()
        .top("0")
        .step({ duration: 0 });
      that.setData({
        animationData: animation.export(),
      });

      that.setData({ timer: timer });
    }

    // 调用 animateNumber 函数
    animateNumber.call(this, 9876543210, 2000);

可以看到，这个函数接收两个参数，分别是目标数字和动画时长。在函数体中，我们重复了之前计时器的逻辑部分，但是将初始数字和计时器清理都从数据里面移到了函数外部。在计时器结束后，执行和之前一样的动画效果，实现数字滚动效果。

示例二：使用插件实现滚动数字

如果你不想手写动画，也可以使用现成的数字滚动插件，并修改样式适应自己的需求。下面是一个示例：

<view class="number-display">
  <text class="number-text">{{ number }}</text>
  <number-scrolling duration="{{ duration }}" class="number-scrolling" wx:if="{{ useScrolling }}"></number-scrolling>
  <number-text duration="{{ duration }}" class="number-scrolling" wx:else></number-text>
</view>

在 wxml 文件中，我们引入了一个名叫 number-scrolling 的插件，然后根据需要选择是否使用。如果使用，则插件会产生滚动数字的效果；如果不使用，则直接显示目标数字。同时，我们将样式分离到 .number-text 和 .number-scrolling 两个类中，以便样式调整。

.number-text {
  font-size: 32px;
  color: #ff6886;
  font-weight: bold;
  text-align: center;
}

.number-scrolling {
  height: 40px;
  overflow: hidden;
  position: relative;
}

.number-scrolling .number-scrolling-item {
  position: absolute;
  top: 0px;
}

在 js 文件中，我们需要导入插件，并设置插件参数：

const numberScrollingBehaviors = require('../../behaviors/number-scrolling');

Page({
  behaviors: [numberScrollingBehaviors],

  data: {
    number: 1234567890,
    duration: 2000,
    useScrolling: true,
  },
});

注意，在 js 文件中，我们需要导入 number-scrolling 插件的行为，以便使用插件提供的方法和属性。

完整代码及效果请参考示例。