Question

我正在使用react-native-circular-progress组件，并且试图每30秒循环播放一次动画。

即动画长30秒，我希望动画一完成就重新启动

该组件公开了一个名为reAnimate的函数，一旦该组件挂载，我就将其放入setInterval函数中。

import React from 'react';
import { StyleSheet, Text, View,Dimensions, Easing } from 'react-native';
import { AnimatedCircularProgress } from 'react-native-circular-progress';

const MAX_POINTS = 30;
export default class App extends React.Component {
    state = {
        isMoving: false,
        pointsDelta: 0,
        points: 1,
    };

    componentDidMount(){

        setInterval(
            () => this.circularProgress.reAnimate(0,100, 30000,Easing.linear),
            30000
        );
    }

    render() {
        const { width } = Dimensions.get("window");
        const window = width - 120;
        const fill = (this.state.points / MAX_POINTS) * 100;
        return (
            <View style={styles.container} >

            <AnimatedCircularProgress
                size={window}
                width={7}
                backgroundWidth={5}
                fill={0}
                tintColor="#ef9837"
                backgroundColor="#3d5875"
                ref={(ref) => this.circularProgress = ref}
                arcSweepAngle={240}
                rotation={240}
                lineCap="round"
            >
                {fill => <Text style={styles.points}>{Math.round((MAX_POINTS * fill) / 100)}</Text>}

            </AnimatedCircularProgress>

            </View>
        );
    }
}

const styles = StyleSheet.create({
    points: {
        textAlign: 'center',
        color: '#ef9837',
        fontSize: 50,
        fontWeight: '100',
    },
    container: {
        flex: 1,
        justifyContent: 'space-between',
        alignItems: 'center',
        backgroundColor: '#0d131d',
        padding: 50,
    },
    pointsDelta: {
        color: '#4c6479',
        fontSize: 50,
        fontWeight: '100',
    },
    pointsDeltaActive: {
        color: '#fff',
    },
});

这正在工作...但是...动画仅在组件安装后 30s 开始。我如何使其立即循环？

任何帮助将不胜感激。

谢谢。

Answer 1

原因是setInterval不会立即触发，它将在您通过Employee list_of_children child Emily ['Clark'] Clark Hans ['Watson', 'Monica'] Watson Hans ['Watson', 'Monica'] Monica Jonathen ['John', 'Bob','Jennifer'] John Jonathen ['John', 'Bob','Jennifer'] Bob Jonathen ['John', 'Bob','Jennifer'] Jennifer之后（即30分钟）开始启动，因此您要做的就是在设置时间间隔之前先拨打电话，也不要忘记清除时间间隔。

这就是我要的方式：

duration

我如何循环播放动画循环进度组件

1 个答案: