我如何在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>
    )
}
}

Answer 1

您是否正在寻找类似的东西？

https://www.freecodecamp.org/news/how-to-build-a-flip-timer-in-react-native-e208e54baf58/