Vignesh
Vignesh

Reputation: 1

react native border animation creation like an Loader

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

Answers (0)

Related Questions