博客

这个效果仿照的是某团外卖选择优惠券之后的金额变化效果，开始想做成数字滚动的样式，后来发现我理解的效果和实际有出入，就又老老实实的开始调研了。

调研到了几个方法但是都不太适用。但是也贴在这里，供大家参考。


1、js数字金额滚动动画(vue)



https://www.jianshu.com/p/90f40f5b1800?utm_campaign=maleskine&utm_content=note&utm_medium=seo_notes&utm_source=recommendation



2、小程序：数字滚动效果



https://www.jianshu.com/p/8952c688073c

但是这两个方法我在小程序上并没有得到很好的适用，可能是我哪里处理有问题。最后无法，尝试问了一下ChatGPT，得到了一些代码示例，最终通过微信提供的animationData方法~ 那么下面展示一下完整代码吧！

// 这里是优惠券的代码，点击展开优惠券列表，
// 列表下方会有个确定按钮，点击后才会触发动画效果
<view class="has_coupon" wx:if="{{!no_chose_counpon && has_counpon}}" bindtap="openCouponList">
   <view class="coupon_num">3张可用</view>
</view>
// 这里就是金额滚动效果展示的地方
<view class="roll_price">{{number}}</view>

点击确定按钮后触发sureCoupon方法，需要setData，我们这里演示的是从34.67 -> 12.64的动态效果

// 确定-优惠券
sureCoupon(){
  let that =this;
  that.setData({
    number: 12.64,
    animationData: that.numberChange(34.67, 12.64)
  })
}

  //金额变动动画
  numberChange(startValue, endValue) {
    let animation = wx.createAnimation({
      duration: 1000,
      timingFunction: 'linear'
    })
	// 这里我希望差值分为40组数据递减显示，也可以换成其他
    let diffValue = (endValue - startValue) / 40
    let numberArray = []
    // 如果更换了diffValue，这里的i <= 40 的部分也需要更换
    for (let i = 0; i <= 40; i++) {
      let number = (startValue + diffValue * i).toFixed(2)
      numberArray.push(number)
    }
    let animationData = animation.export()
    for (let i = 0; i < numberArray.length; i++) {
      let number = numberArray[i]
      let delay = 10 * i
      let numberAnimation = animation.opacity(0).step({ duration: delay })
      numberAnimation = numberAnimation.opacity(1).step({ duration: 60, timingFunction: 'ease-in-out' })
      animationData = numberAnimation.export()
      setTimeout(() => {
        this.setData({ number: number })
      }, delay)
    }

    setTimeout(() => {
      this.setData({ number: endValue.toFixed(2) })
    }, animationData.duration)

    return animationData
  },

以上就是如何在微信小程序中实现选择优惠券后，支付金额滚动显示的代码啦。希望对你有帮助！如果你有更好的方法，也欢迎你在留言的地方告诉我！