Реагируйте на круговую анимацию SVG с помощью Circle

Question

Я довольно новичок в программировании на React Native, у меня есть некоторый опыт в веб-разработке, но не так много в анимации.Поэтому я изо всех сил стараюсь сделать круговую анимацию прогресса с помощью линии ( AnimatedPath ) и круга ( AnimatedCircle ).Это мой рендер:

<Svg height={size} width={size} style={timerProgressStyle.container}>
<G rotation={rotation} originX={size/2} originY={size/2}>
    <Path d={backgroundPath} stroke={'#fff'} strokeWidth={width} strokeLinecap={lineCap} fill='transparent'/>
    <AnimatedPath d={background} ref={ref=> this.animatedPath = ref} stroke={this.props.strokeColor} strokeWidth={width} strokeLinecap={lineCap} fill='transparent'/>
    <AnimatedCircle ref={ref=> this.animatedCircle = ref} cx={0} cy={size/2} r="10" stroke="white" strokeWidth="0" fill={this.props.strokeColor}/>
</G>

и это моя функция анимации:

      startAnimation() {
    Animated.timing(
        this.state.fill,
        {
            toValue: this.props.higherBound,
            duration: this.props.higherBound * 1000,
            easing: Easing.linear(),
            useNativeDriver: true
        }
    ).start();

    Animated.sequence([
        Animated.timing(
            this.state.cx, {toValue: this.state.size, duration: this.props.higherBound * 500, easing: Easing.linear(), useNativeDriver: true}
        ),
        Animated.timing(
            this.state.cx, {toValue: 0, duration: this.props.higherBound * 500, easing: Easing.linear(), useNativeDriver: true}
        )
    ]).start();

    Animated.sequence([
        Animated.timing(
            this.state.cy, {toValue: 0 , duration: this.props.higherBound * 250, easing: Easing.linear(), useNativeDriver: true}
        ),
        Animated.timing(
            this.state.cy, {toValue: this.state.size / 2, duration: this.props.higherBound * 250, easing: Easing.linear(), useNativeDriver: true}
        ),
        Animated.timing(
            this.state.cy, {toValue: this.state.size, duration: this.props.higherBound * 250, easing: Easing.linear(), useNativeDriver: true}
        ),
        Animated.timing(
            this.state.cy, {toValue: this.state.size / 2, duration: this.props.higherBound * 250, easing: Easing.linear(), useNativeDriver: true}
        ),
    ]).start()
  }

Я немного объясню это: this.state.fill относится к заполнению AnimatedPath, this.state.cx и cy относится к положению AnimatedCircle. this.props.higherBound относится к числу секунд длительности, size - это размер представления SVG.Путь идет гладко, но я не могу заставить свой AnimatedCircle следовать по пути, поскольку его позиции следуют прямым линиям.Я не эксперт по анимации и не React Native, если вы, ребята, могли бы помочь, это было бы очень хорошо.Спасибо.

Answer 1

Вы можете использовать такой модуль, как response-native-progress-circle .