Reanimated 4 稳定版：用 CSS 动画取代大部分 worklet 场景
Reanimated 4 稳定版发布，新增兼容 CSS 的声明式动画 API，可取代部分 worklet 场景。
中文
复制
React Native Reanimated 4 稳定版发布——React Native 动画的未来
正如之前承诺的，这是自我们在 Reanimated 2 中引入 worklet 概念、并在此基础上提出全新的基于 UI 线程的动画引擎以来，规模最大、也最重要的一次发布。Worklet 已经成为 React Native 生态中非常重要的一部分，也启发了许多其他项目在这些基础之上进行构建。这个重大版本将 worklet 提升到了新的层次，同时带来了全新的、声明式的、兼容 CSS 的动画 API，目标是在许多使用场景中取代 worklet。观看我们的简短发布视频，快速了解这个版本的整体内容。
开始使用 CSS 动画和过渡
基于 CSS 的动画和过渡 API 是本次发布的核心亮点。一段时间以来，我们一直在考虑为最常见的一类动画——由状态更新触发和控制（而非手势、滚动位置等）的动画——提供一套清晰的声明式 API。声明式动画可以简化代码库中的许多部分，因为在此之前，哪怕是一个简单的动画也需要一个 shared value 和一个动画样式 worklet。最终我们选定了 CSS 动画和过渡，因为它是一套广为人知、经过实战检验且完整的标准。我们不仅希望它能让来自 Web 的开发者更容易上手 Reanimated，也希望让 React Native 开发者能够学习或保持对这些 API 的熟悉。 Reanimated 中 CSS 声明式动画的另一个好处是它们更容易优化。原因在于，通过这种方式，我们能更清楚地了解哪些组件的哪些属性正在被动画化。而使用 shared value 时，这些原本可以显式获得的信息，只能根据 shared value 或派生值之间的关系来推算。因此我们建议由状态控制的动画开始采用 Reanimated 的 CSS API。 你应该会看到代码更少（无需调用 hook），性能也更好（后续更新还会带来更多优化）。如果拿不准，可以看看我们的示例应用，它展示了这套 API 的强大之处：
那 worklets 呢？
面对更复杂的场景，使用 worklets 和 shared values 仍然是推荐做法。 比如手势或滚动驱动的动画、屏幕转场动画，或者需要编排多个派生动画的场景。请不要觉得现在就得把所有代码改写成 CSS 动画——我们为 Worklets 准备了不少性能相关的改进，很快就会拿出来。
Worklets 得到的关注比以往任何时候都多。相关代码已经迁移到独立的包 react-native-worklets，这样我们可以独立地加快迭代，也能让其他非动画类的包用上它。事实上，这次迁移在 3.17 版本就已经完成，没有人察觉到。从 Reanimated 用户的角度看，这个变化完全透明，因为 Worklets 只是 Reanimated 的一个内部依赖。Reanimated 4 的安装指南现在要求你在 Babel 配置里列出 react-native-worklets/plugin，而不是 react-native-reanimated/plugin。如果你已有现成的应用，可以现在就改，但旧写法在可预见的未来仍然可用。
破坏性变更
Reanimated 4 的 API 与 Reanimated 3 兼容，升级时你应该不需要改动任何代码（适用条款与条件™）。我们的库被生态中数以万计的应用和库使用，因此在让社区适配新版本这件事上，我们格外用心，尽量把过程做到最轻松。Reanimated 4 要求你的应用使用 React Native 新架构，而迁移到新架构本身可能就需要不少工作。一旦你的应用用上了新架构，就可以几乎不做改动地升级到 Reanimated 4，并逐步开始使用 CSS 动画这类新特性。
为了持续改进 Reanimated，我们有时不得不放弃一些糟糕的设计决策，但每次这么做，我们都会尽量减少对用户的影响，并把变更讲清楚。这一次同样如此，我们会移除一些在 Reanimated 3 中已被废弃、极少使用的方法。还有少数如今已过时的方法会收到废弃提示，但为了向后兼容仍会继续以 no-op 形式存在。如果你想了解细节，请查阅完整的迁移指南。
除了 API 层面的调整，spring 动画还有一处行为上的变化——在 Reanimated 4 中，它采用了新的默认设置。如果你之前为 spring 动画设置过自定义参数，这些设置仍然有效。其他情况下，变化应该很细微，而且在我们看来，行为更好、更自然。我们最初的 spring 实现是为了模仿 React Native 核心中的那一版。随着时间推移，我们发现这种方式有些笨拙。spring 的力学机制对起始和结束条件过于敏感，除非把那些晦涩的阈值参数调对，否则经常会出现异常甚至完全错误的行为。新的 spring 实现无需指定这些阈值参数就能正常工作（不过为了向后兼容，你仍然可以提供它们）。使用 spring 时，我们建议只指定 duration 和 damping ratio。这样用户看到的行为更可预测，因为无论距离多远，动画都会在给定的时间结束。下面是新 spring 的实际效果：
最后几点
五年前，我们开始与 Shopify 合作，用 Reanimated 2 重塑 React Native 的动画生态。感谢他们一路以来的信任与支持！我们也要感谢 Meta 的 React Native 核心团队，他们在解决 Reanimated 与 React Native 交界处的问题上倾注了大量心血。
Reanimated 4 是全新的，但同时又让人倍感熟悉。我们相信，凭借这些新增能力，它会把你的应用提升到新的水平，让更多开发者能够打造出用户喜爱的、动画表现出色的移动端界面。
一些有用的链接：