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 useDerivedValues 但数学上让一个从 0 开始，一个从 0.5 开始，一个从 1 开始（只需在彼此之间加上 0.5 和将其 (%) 调制为 1 并不能说明 withRepeat 在达到 1 后返回）
• 我尝试使用 useSharedValue([0, 0, 0])，然后使用原子操作对其进行更新，但似乎不受支持

Answer 1

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

想法是：

• 有一个共享值“进度”，其 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])
);