限定时间内数字增长动画，先快后慢

设定一个值跟时间，可选格式化数字（每三位加个逗号），可自定义className

<ActiveNumber className="data-number" value={126560} delay={1000} formatNumber />

返回一个span标签

import React, {Component} from 'react';
import PropTypes from 'prop-types';class ActiveNumber extends Component {state = {currentNumber: 0,showNumber: 0};constructor(props) {super(props);}componentDidMount() {let { delay=300, value=0, formatNumber=false } = this.props;// console.log(delay, value);let time = delay / value;let step, stepCount;// 最短每30ms为一帧if(time > 30) {step = value / delay;stepCount = delay / time;} else {time = 30;stepCount = delay / 30;step = value / stepCount;}console.log('time', time);console.log('expectStep', step);console.log('stepCount', stepCount);// return ;let startTime = new Date();let decrease = step / stepCount;// let change = step * 2;let change = step * 1.5;this.interval = setInterval(() => {// console.log(change);change = change > 1 ? change: 1;let currentNumber = this.state.currentNumber + change;currentNumber = currentNumber > value ? value: currentNumber;if(currentNumber >= value) {clearInterval(this.interval);let endTime = new Date();console.log('实际耗时：', endTime - startTime);}this.setState({ currentNumber });const showNumber = currentNumber.toString().split('.')[0];  if(formatNumber) this.setState({ showNumber: this.fomatNumber(showNumber)});else this.setState({ showNumber });change -= decrease;}, time)}/*** 数字每三位加逗号* @param numberOrString* @returns {string}*/fomatNumber = numberOrString => {let str = String(numberOrString);let reg = str.indexOf(".") > -1 ? /(\d)(?=(\d{3})+\.)/g : /(\d)(?=(?:\d{3})+$)/g;return str.replace(reg,"$1,");}componentWillMount() {clearInterval(this.interval);}render() {let { className='' } = this.props;return (<span className={className}>{this.state.showNumber}</span>);}
}export default ActiveNumber;ActiveNumber.propTypes = {className: PropTypes.string,delay: PropTypes.number,formatNumber: PropTypes.bool,value: PropTypes.number.isRequired
};ActiveNumber.defaultProps = {className: '',delay: 300,formatNumber: false,value: 0
};

demo：https://codepen.io/lister/pen/gJZLry?editors=1111

限定时间内数字增长动画，先快后慢相关推荐

gsap数字增长动画
更新于:2021-09-18 数字增长动画 a.vue 基于vue2和gsap(3.7.0) 仅支持到小数点后6位 a.vue <span>{{ totalNodeCount ? tota ...
Vue指令实现数字增长动画？
vue中,想要实现几个数字从0缓慢增长到目标值的动态特效,我采用了vue指令实现. Vue.directive('countRunning', {bind(el) {let timer = null; ...
cocoscreator数字增长动画
cocoscreator缓动动画写法: updatenNumberAnim: function (curNum) {var obj = {};obj.num = originNum;this.lbNu ...
数字增长动画-uniapp插件
使用方法引用代码 import digitJump from '../../components/zhihuai-DigitJump/zhihuai-DigitJump.vue' 使用方式 < ...
Flutter 数字增加动画
在移动应用开发中,流畅的动画不仅可以给人留下美好的印象,还可以提高用户体验.在Flutter开发中,官方提供了简洁且强大的动画API,比较核心的有AnimationController和Animati ...
vue中如何展现快速增长数字的动画
vue-countupjs的使用 vue-countupjs的前身就是countup.js专门用于做数字增长的动画,满足一些展示型数字的使用. 使用流程 1. 安装vue-countupjs npm ...
qt同时两个动画执行_Qt实现数字滚动动画效果
自己开发了一个股票智能分析软件,功能很强大,需要的点击下面的链接获取: https://www.cnblogs.com/bclshuai/p/11380657.html Qt实现数字滚动动画效果 3. ...
关于CSS动画播放完后消失
animation-fill-mode: forwards 值描述 none 不改变默认行为. forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义). backwards 在 ...
利用facebook pop进行数字的动画显示。
最近项目用到要把数字从小到大动画显示.下面我来介绍一下具体做法. 1.首先用CocoaPods安装pop引擎到项目,安装CocoaPods来看这篇博文http://www.devtang.com/bl ...

限定时间内数字增长动画，先快后慢

限定时间内数字增长动画，先快后慢相关推荐

最新文章

热门文章