Reac-Native-Number-Easing实现

来源：互联网发布：如何确保js加载完全编辑：程序博客网时间：2024/06/03 17:40

在rn项目中做到了跟金额相关的项目，然后就想到做个类似余额宝金额跳动的效果，本来想找个第三方库省个事，然而在网上并没有，只有一个react的Number-Easing研究了一下作者的思想以后，尝试着改了一个rn的版本出来，反正能用。。。。，附上原作者ract版的github地址：https://github.com/javierbyte/react-number-easing

附上代码：

'use strict';import  React, {Component,PropTypes} from 'react';import {    Text} from 'react-native';import eases from 'eases';import TimerMixin from 'react-timer-mixin';export default  class NumberEasing extends Component {    static propTypes = {        ease: PropTypes.string,        speed: PropTypes.string,        value: PropTypes.string.isRequired    };    static defaultProps = {        ease: 'quintInOut',        speed: '2000',    };    constructor(props) {        super(props);        this.timeout = null;        this.startAnimationTime = (new Date()).getTime();        this.state = {            displayValue: 0        }        this.updateNumber = this.updateNumber.bind(this);    }    componentDidMount() {        if (this.props.value == '0' || this.props.value == '00') {            return;        }        this.updateNumber();    }    updateNumber() {        var now = new Date().getTime();        var elapsedTime = now - this.startAnimationTime;        var progress = eases[this.props.ease](elapsedTime / this.props.speed);        if (this.state.displayValue >= this.props.value) {            this.setState({                displayValue: this.props.value            });            TimerMixin.clearTimeout(this.timeout);            return;        }        var currentDisplayValue = Math.round((this.props.value - this.state.displayValue) * progress + this.state.displayValue);        this.setState({            displayValue: currentDisplayValue        });        this.timeout = TimerMixin.setTimeout(this.updateNumber, 16);    }    componentWillUnmount() {        TimerMixin.clearTimeout(this.timeout);    }    render() {        return <Text style={this.props.style}>                {this.state.displayValue}                </Text>    }};module.exports = NumberEasing;

package的dependencies要加入一下引用："eases": "^1.0.6","react-timer-mixin": "^0.13.3",

使用的话以这样的方式：

                 <NumberEasing                    value={9876}                    speed={800}                    ease='quintInOut'/>

Git地址：https://github.com/xy898956/react-native-number-easing.git

0 0