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