react-native - Rect-native Reanimated(v2) 插值 translateY

Question

我正在尝试创建一个动画，其中红色条将在无限和反向动画中沿 y 轴移动。由于某种原因，我无法弄清楚并且无法实现所需的行为。任何帮助将不胜感激。

import Animated, {
  useAnimatedStyle,
  useSharedValue,
  interpolate,
  withTiming,
  withRepeat,
  Extrapolate,
} from 'react-native-reanimated';

export default CustomMarker = () => {

  const bar = useSharedValue(0);
  const barStyle = useAnimatedStyle(() => {
    const yValue = interpolate(bar.value, [0, 1], [0, 225]);
    return {
      transform: [{ translateY: yValue }],
    };
  });

  useEffect(() => {
    bar.value = withRepeat(withTiming(1, { duration: 800 }), -1, true);
  });

    return (
        <View
        style={{
          backgroundColor: COLORS.darkOverlay,
          height: 540,
          alignItems: 'center',
          justifyContent: 'center',
        }}>
          <View style={styles.rectangleStyle}>
            <Animated.View style={[styles.redBarStyle, barStyle]} />
          </View>
        </View>
    );
  };

const styles = Stylesheet.create({
  rectangleStyle: {
    height: 230,
    width: 400,
    alignItems: 'center',
    justifyContent: 'center',
  },
   redBarStyle: {
     position: 'absolute',
     top: 0,
     height: 10,
     width: 225,
     backgroundColor: 'red',
     borderRadius: 5,
   },
})