1

我正在使用 reanimated v2 为应用程序创建动画。我正在创建一个带有三个上下跳跃的点的启动（加载）屏幕。这 3 个点之间应该有一定的恒定 延迟（间隔）。就像其他人在 facebook 的 Messenger 中输入时的动画一样。

动画一开始看起来不错，但过了一会儿，2 个点甚至 3 个点取决于延迟和持续时间同步 ，我剩下 2 个或 3 个点彼此绝对同步。这是问题动画视频的视频

我对 react-native 和复活非常陌生。所以我假设问题出在我的代码中。我不知道这是否是正确的方法。我在 reanimated v1 中看到的代码示例具有“ startClock ”和自定义“ runTiming ”功能，但我在 v2 的文档中找不到它们。复活的文档

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;

有人可以告诉我为什么动画最终会同步，以及用相同的动画制作三个元素但有一些恒定延迟的正确方法是什么。谢谢你。

4

0 回答 0