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

Question

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

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

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

标签： reactjsreact-nativeanimationreact-animated

Answer 1

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

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

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