小程序js实现【数字变化动画效果】

最新推荐文章于 2024-06-20 00:08:44 发布

Archimelan

最新推荐文章于 2024-06-20 00:08:44 发布

阅读量1w

点赞数 3

分类专栏：小程序文章标签：数字变化动画

本文链接：https://blog.csdn.net/archimelan/article/details/80309318

版权

本文介绍了如何在小程序中创建数字变化的动画效果，通过将数字差值分步变化，达到类似摇奖过程的视觉体验。文章提供了wxml和js的相关代码实现。

摘要由CSDN通过智能技术生成

需求：由一个数字变化到另一个数字，中间有类似摇奖、生成随机数那样的动画视觉效果

效果：

思路：把两个数的差值分成几次变化

wxml：

new Number: {
  {newNumber}}
<view>{
  {number}}</view>
<button bindtap="start">start</button>

js：

var that
Page({
  data: {
    number: 1000000
  },
  onLoad:function(){
    that = this
  },
  start: ()=> {
      var random = Math.floor(Math.random() * 900000 + 100000)
      that.setData({
        newNumber: random
      })
      change(random) 
  }
})
var change = number => {
  console.log('====new number====',number)
  var baseNumber = that.data.number //原数字
  var difference = number - that.data.number //与原数字的差
  var a