Reputation: 1
i want to create a border spinning from 0 deg to 360 deg and with color changes different, im new to react native animations , i saw that reactNative user set to false only for animation that does not affect layout , i tried some methods but Animation is
const rotation = useRef(new Animated.Value(0)).current;
function BorderAnimation() {
rotation.setValue(0);
Animated.timing(rotation, {
toValue: 1,
easing: Easing.linear,
duration: 2000,
useNativeDriver: false,
}).start();
}
const rotateInterpolate = rotation.interpolate({
inputRange: [0, 1],
outputRange: ["0deg", "360deg"],
});
const borderColorInterpolate = rotation.interpolate({
inputRange: [0, 0.25, 0.5, 0.75, 0.9, 1],
outputRange: [
"transparent",
"#0000ff38",
"#0000ff48",
"#0000ff59",
"#0000ff7d",
"#0000ff9c",
],
});
<View style={styles.analyzerCircleMainDiv}>
<Animated.View
style={[
styles.analyzerCircle,
{
transform: [{ rotate: rotateInterpolate }],
borderTopColor: borderColorInterpolate,
},
]}
/>
<Text style={styles.AnalyzerText}>Analyze</Text>
</View>
Styles
analyzerCircleMainDiv: {
marginVertical: 40,
backgroundColor: "#f2f2f2",
borderRadius: 100,
height: 200,
width: 200,
alignItems: "center",
justifyContent: "center",
textAlign: "center",
position: "relative",
},
analyzerCircle: {
position: "absolute",
top: 0,
left: 0,
borderWidth: 7,
zIndex: -1,
borderRadius: 100,
height: "100%",
width: "100%",
borderStyle: "solid",
backgroundColor: "#f2f2f2",
borderTopColor: "black"
},
AnalyzerText: {
position: "absolute",
top: "50%",
left: "50%",
transform: [{ translateX: -50 }, { translateY: -50 }],
zIndex: 1,
color: "black",
fontWeight: "400",
fontSize: 26,
},
So i want like a loader animation but chaninging borderTop colours , Thank u
Upvotes: 0
Views: 19