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 个共享值彼此之间具有确定性延迟的最佳方法是什么？

---

我尝试了什么？

• 我尝试使用 1useSharedValue和 2 useDerivedValues，但是让一个从 0 开始、一个从 0.5 开始、一个从 1 开始的数学计算并不简单（只需在彼此之间添加 0.5 并将其 (%) 调制为 1 就可以了） t 考虑withRepeat达到 1 后返回的情况
• 我尝试使用 auseSharedValue([0, 0, 0])然后用原子操作更新它，但这似乎不受支持

Answer 1

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

这个想法是：

• 有一个共享值“progress”，其 0 -> 1 映射到一个完整的动画周期（例如 0 -> 1 -> 0）
• 有 3 个派生值，它们在不同时刻开始并进行不同的插值：
  • 1 0 -> 0.5 -> 1 -> 0.5 -> 0
  • 1 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])
);