reactjs - 如何在 React Native 的倒计时中制作幻灯片动画？

Question

我想知道如何让我的倒计时对每个变化的数字都有一个向下滑动的动画，但我无法弄清楚我是如何做到的。

到目前为止，我只设法使倒计时的基本功能正常工作：

export default class Countdown extends React.Component {
state={
    eventDate:moment.duration().add({hours:1,minutes:15,seconds:0}),
    hours:0,
    mins:0,
    secs:0
};

componentDidMount(){
    this.updateTimer()
}
updateTimer=()=>{

    const x = setInterval(()=>{
        let { eventDate} = this.state;

        if(eventDate <=0){
            clearInterval(x)
        }else {
            eventDate = eventDate.subtract(1,"s");
            const hours = eventDate.hours();
            const mins = eventDate.minutes();
            const secs = eventDate.seconds();

            this.setState({
                hours,
                mins,
                secs,
                eventDate
        })}},1000)

};
render() {
    const {hours, mins, secs} = this.state;

    return (
        <View>
            <Text>
                {`${("0" + hours).slice(-2)}`}
                    <BlinkingText interval={1000}>:</BlinkingText>
                {`${("0" + mins).slice(-2)}`}
                    <BlinkingText interval={1000}>:</BlinkingText>
                {`${("0" + secs).slice(-2)}`}
            </Text>
        </View>
    )
}
}

标签： reactjsreact-nativeanimationexpocountdown