一个 Animated.Value 与多个用于控制过渡

Question

在实现影响许多不同元素或同一组件的许多实例的过渡动画时，是否有关于在哪里控制动画的最佳实践？我玩过两种不同的方法，但我不确定哪个更好。

一种选择是让树中最高层的组件创建一个 Animated.Value 作为从 0 到 1 的计时器。它将这个计时器作为道具向下传递给后代，后代使用 Value.interpolate 来做些什么他们需要接受它。这符合 React 向上移动状态的设计原则，但是将 Animated.Value 作为 prop 传递感觉很奇怪（尽管它工作正常）并且该值总是需要插值才能有用。

另一种选择是传递一个布尔属性，比如“isTransitioning”。每个后代都拥有自己的 Animated.Value 并有一个 useEffect 钩子，当 isTransitioning 切换为 true 时，它​​会启动动画。

Answer 1

在我看来，我们应该在这里参考SRP（单一职责原则——模块应该有一个且只有一个改变的理由）和DRY（不要重复自己）。

如果在您的特定情况下，后代是可以在其他地方重用的单独组件 - 这可能是将此功能放入其中的一个很好的理由。但如果这是一个不可分割的组件 - 最好只保留一个Animated.Value并将其应用于所有子组件。

顺便说一句，如果没有明显的问题，优化是我们最后应该关心的。可维护性是重中之重。