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

时间:2018-09-26 07:41:45

标签: react-native animation svg

我对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,如果你们能帮助的话,那真的很好。谢谢。

1 个答案:

答案 0 :(得分:0)

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