Javascript 在“中循环动画”；React Native Reactivated 2“；过一会儿再同步

我使用复活v2为应用程序创建动画。我正在创建一个带有三个上下跳跃的点的启动（加载）屏幕。这三个点之间应该有一定的常数延迟（间隔）。就像另一个人在facebook的messenger中输入的动画一样

动画一开始看起来不错，但过了一段时间，2个点甚至3个点取决于延迟和持续时间同步向上，剩下的2个或3个点完全同步。这是这个问题的视频

我是一个非常新的反应本土和复活。所以我假设问题在我的代码中。我不知道这样做是否正确。我在reanimated v1中看到的代码示例具有“startClock”和自定义“runTiming”函数，但我在v2的文档中找不到它们

import React，{useffect}来自“React”；
从“react native”导入{View，StyleSheet}；
导入动画{
useSharedValue，
使用动画样式，
重复一遍，
关于时间，
迟迟，
}从“反应本土复活”；
从“../../assets/themeColor”导入{themeColor}”；
常量加载=（）=>{
常数y1=useSharedValue（0）；
常数y2=使用共享值（0）；
常数y3=useSharedValue（0）；
const animatedStyles1=使用animatedstyle（（）=>{
返回{
转换：[
{
特兰西：延迟(
0,
withRepeat（withTiming（y1.value，{duration:200}），-1，true）
),
},
],
};
});
const animatedStyles2=使用animatedstyle（（）=>{
返回{
转换：[
{
特兰西：延迟(
100,
withRepeat（withTiming（y2.value，{duration:200}），-1，true）
),
},
],
};
});
const animatedStyles3=使用animatedstyle（（）=>{
返回{
转换：[
{
特兰西：延迟(
200,
withRepeat（withTiming（y3.value，{duration:200}），-1，true）
),
},
],
};
});
/**
*
*
*
*
*/
useffect（（）=>{
y1.值=-10；
y2.数值=-10；
y3.0值=-10；
}, []);
/**
*
*
*
*
*
*/
返回(
);
};
const styles=StyleSheet.create({
装货集装箱：{
弹性：1，
flexDirection:“行”，
辩护内容：“中心”，
对齐项目：“中心”，
},
球风：{
宽度：13，
身高：13，
背景颜色：themeColor，
边界半径：13，
差额：10，
},
});
导出默认加载；

有人能告诉我为什么动画最终会同步和用相同的动画制作三个元素的动画的正确方法是什么，但要有一定的延迟。多谢各位

import React, { useEffect } from "react";
import { View, StyleSheet } from "react-native";
import Animated, {
  useSharedValue,
  useAnimatedStyle,
  withRepeat,
  withTiming,
  withDelay,
} from "react-native-reanimated";
import { themeColor } from "../../assets/ThemeColor";

const Loading = () => {
  const y1 = useSharedValue(0);
  const y2 = useSharedValue(0);
  const y3 = useSharedValue(0);

  const animatedStyles1 = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: withDelay(
            0,
            withRepeat(withTiming(y1.value, { duration: 200 }), -1, true)
          ),
        },
      ],
    };
  });
  const animatedStyles2 = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: withDelay(
            100,
            withRepeat(withTiming(y2.value, { duration: 200 }), -1, true)
          ),
        },
      ],
    };
  });
  const animatedStyles3 = useAnimatedStyle(() => {
    return {
      transform: [
        {
          translateY: withDelay(
            200,
            withRepeat(withTiming(y3.value, { duration: 200 }), -1, true)
          ),
        },
      ],
    };
  });

  /**
   *
   *
   *
   *
   */

  useEffect(() => {
    y1.value = -10;
    y2.value = -10;
    y3.value = -10;
  }, []);

  /**
   *
   *
   *
   *
   *
   */

  return (
    <View style={styles.loadingContainer}>
      <Animated.View
        style={[styles.ballStyle, animatedStyles1]}
      ></Animated.View>
      <Animated.View
        style={[styles.ballStyle, animatedStyles2]}
      ></Animated.View>
      <Animated.View
        style={[styles.ballStyle, animatedStyles3]}
      ></Animated.View>
    </View>
  );
};

const styles = StyleSheet.create({
  loadingContainer: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "center",
    alignItems: "center",
  },

  ballStyle: {
    width: 13,
    height: 13,
    backgroundColor: themeColor,
    borderRadius: 13,
    margin: 10,
  },
});

export default Loading;