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

【问题标题】：One Animated.Value vs. Many for Controlling Transitions一个 Animated.Value 与多个用于控制过渡
【发布时间】：2020-08-12 02:49:59
【问题描述】：

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

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

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

【问题讨论】：

标签： reactjs react-native animation react-animated

【解决方案1】：

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

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

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

【讨论】：