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

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

效果：

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

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 absDifferent = Math.abs(difference) //差取绝对值var changeTimes = absDifferent < 6 ? absDifferent : 6 //最多变化6次var changeUnit = absDifferent < 6 ? 1 : Math.floor(difference / 6)  //绝对差除以变化次数// 依次变化for (var i = 0; i < changeTimes; i += 1){// 使用闭包传入i值，用来判断是不是最后一次变化(function(i){setTimeout(()=>{that.setData({number: that.data.number += changeUnit})        // 差值除以变化次数时，并不都是整除的，所以最后一步要精确设置新数字if (i == changeTimes - 1 ){that.setData({number: baseNumber + difference          })        }},100*(i+1))})(i)}
}

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

微信小程序js把数字转化成字母
微信小程序 js 把数字转化成字母微信小程序 js 把数字转化成字母 for (let i = 0; i < 26; i++) {list[i] = {};list[i].name = Str ...
微信小程序点击卡片切换动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: html <view class='aa'><image animation=&qu ...
[微信小程序]点击切换卡片动画效果
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 先上效果图, GIF:  <! ...
微信小程序js过度动画
微信小程序js过度动画如有错误还请大神指教.如果觉得不错可以关注我了解更多. 一,我们先来看看效果吧. 二,我们用的是js的逐帧动画,css也可有相同的效果,我们这里用js // pages/arr ...
微信小程序js动画Animation基本使用
最近才发现j小程序js中自带Animation动画功能先在 .js 中使用wx.createAnimation创建动画基本属性文档中很清楚定义动画对象后就可以.加需要的动画效果了,这里要注意== ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
微信小程序实现集卡合成动画
微信小程序实现集卡合成动画效果图微信小程序动画搭建结构样式 js 效果图微信小程序动画创建一个动画实例 animation 调用实例的方法来描述动画最后通过动画实例的 export ...
微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例 1
本文实例讲述了微信小程序实现slideUp.slideDown滑动效果及点击空白隐藏功能.分享给大家供大家参考,具体如下: 怎样实现jq中的slideUp或者slideDown这种动画效果呢,我的思路 ...
qt同时两个动画执行_Qt实现数字滚动动画效果
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html Qt实现数字滚动动画效果 3. ...

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

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

最新文章

热门文章