Question

我对React Native编程还不是很陌生，我在Web开发方面有一些经验，但在动画方面没有太多经验。因此，我正在努力制作一条带有线（ 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 是指AnimatedPath的位置。 AnimatedCircle。 this.props.higherBound 是指持续时间的秒数， size 是SVG视图的大小。路径运行顺利，但是我无法使AnimatedCircle跟随路径，因为他的位置遵循直线。我既不是动画专家，也不是React Native，如果你们能帮助的话，那真的很好。谢谢。

Answer 1

您可以使用react-native-progress-circle之类的模块。

使用Circle反应本机SVG圆形动画进度

1 个答案: