Reanimated v2 - 同步共享值

Question

问题

我正在尝试使用 Reanimated v2 创建此动画：

这是当前的实现：

const opacity1 = useSharedValue(0);
const opacity2 = useSharedValue(0);
const opacity3 = useSharedValue(0);
useEffect(() => {
  const duration = 600;
  const timingOptions = { duration: duration };
  const pulse = withTiming(1, timingOptions);
  const repeated = withRepeat(pulse, -1, true);
  opacity1.value = repeated;
  // *
  opacity2.value = withDelay(duration / 2, repeated);
  // *
  opacity3.value = withDelay(duration, repeated);
}, []);

问题是我用 // * 标记代码的地方似乎有一些随机延迟（可能是由于 JS 执行）导致三个点有时最终同步（有相同的不透明度）。

我认为问题在于更新这 3 个值不是原子的，因此在这些分配之间可能发生任何事情。

解决这个问题并使这 3 个共享值彼此之间具有确定性延迟的最佳方法是什么？

我尝试了什么？

我尝试使用 1 个 useSharedValue 和 2 个 useDerivedValue，但是让一个从 0 开始，一个从 0.5 开始，一个从 1 开始的数学是不平凡的（只是彼此之间相加 0.5 并将其 (%) 调制为 1 并不能解释 withRepeat 在达到 1)
我尝试使用 useSharedValue([0, 0, 0]) 然后用原子操作更新它，但这似乎不受支持

Answer 1

我找到了一个解决方案，不确定它是否是最好的，但它目前有效。

想法是：

有一个共享值“progress”，其 0 -> 1 映射到一个完整的动画循环（例如 0 -> 1 -> 0）
有 3 个派生值，它们在不同时刻开始并以不同方式插值：
- 一个 0 -> 0.5 -> 1 -> 0.5 -> 0
- 一个 0.5 -> 1 -> 0.5 -> 0 -> 0.5
- 一个 1 -> 0.5 -> 0 -> 0.5 -> 1

这是代码：

const progress = useSharedValue(0);
useEffect(() => {
  const pulse = withTiming(1, { duration: 1200, easing: Easing.linear });
  progress.value = withRepeat(pulse, -1, false);
}, []);

const opacity1 = useDerivedValue(() =>
  interpolate(progress.value, [0, 0.25, 0.5, 0.75, 1], [0, 0.5, 1, 0.5, 0])
);
const opacity2 = useDerivedValue(() =>
  interpolate(progress.value, [0, 0.25, 0.5, 0.75, 1], [0.5, 1, 0.5, 0, 0.5])
);
const opacity3 = useDerivedValue(() =>
  interpolate(progress.value, [0, 0.25, 0.5, 0.75, 1], [1, 0.5, 0, 0.5, 1])
);

Reanimated v2 - 同步共享值

Reanimated v2 - Synchronised shared values

javascript

typescript

react-native

react-native-reanimated-v2

问题

我尝试了什么？