Reac-Native-Number-Easing实现

在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