javascript - 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

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

这个想法是：

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