[ReactNative翻译]发布Reanimated 3.0

406 阅读4分钟

本文由 简悦SimpRead 转码,原文地址 blog.swmansion.com

这篇文章介绍了React Native Reanimated库的V3版本的亮点。共享元素Transi......

image.png

今天我们很高兴地宣布Reanimated 3的稳定版本。这是一个漫长的过程,但我们希望等待是值得的,因为这个版本包含了重要的改进和新功能,同时允许从之前版本的库中顺利(希望是无痛的)迁移。在这篇博文中,我们强调了这个版本中一些最重要的变化,并讨论了如何升级以利用所有这些。

共享元素过渡

期待已久的共享元素过渡功能终于来了--这个Reanimated API的新成员使导航屏幕之间的视图动画化成为可能。要使用这个功能,只需在两个不同屏幕上的动画视图上添加相同的 "sharedTransitionTag "属性--现在当在这两个屏幕之间导航时,视图将顺利地从一个地方转移到另一个地方。

围绕这个功能已经有很多人感到兴奋,我们向你保证,我们也很兴奋,因为我们终于可以把它拿出来让大家试试。共享元素转换是我们最近工作的最大的功能之一,也是需要最多努力的功能,同时也是使用最少的功能(这毕竟是它的第一个版本)。因此,我们在它旁边放了一个 "实验性功能 "的标志,并期待着得到你的反馈,这将使我们能够打磨一些你在向你的应用程序添加共享元素过渡时可能遇到的粗糙边缘。你可以访问我们的文档网站,了解更多信息并查看代码样本。

更好、更快、更强

Reanimated 3从表面上看可能与它的前辈非常相似,然而,如果你看一下它的内部结构,就会发现它非常不同。Reanimated 3最大的变化之一发生在其核心部分,我们完全重写了worklets/共享值引擎以及布局动画引擎。这两个重写工作主要集中在改善库的性能、内存使用和稳定性。然而,它们的目的也是为了释放该库的一些新的潜在功能。其中之一就是前面提到的共享元素过渡功能,它是建立在布局动画API之上的,如果没有新的引擎,它就不可能以目前的形式工作。同样,worklets和共享值的重写也释放了一些新的可能性,在这种情况下,然而,这项工作还没有完全结束,所以期待更多有趣的更新,作为Reanimated最核心的变化的结果。

开发人员,开发人员,开发人员...

Reanimated的目标是在移动应用中提供最流畅的动画体验。但最终使用它的是开发者。这就是为什么开发人员的体验与库的性能和稳定性一起被放在我们的优先级列表的首位。在第三版中,我们增加了对React Native的LogBox的支持,以便在你的worklet中出现问题时更好地报告错误。新的Reanimated现在允许JS调试器连接到UI运行时并检查那里正在执行的代码。除此之外,我们还合并了一些补丁,这些补丁应该可以帮助你浏览常见的错误。

除了所有这些变化,我们还扩展了Reanimated的API,使它更容易被你使用,并使你的代码库更容易被跟踪。在Reanimated 3中,我们引入了 "内联样式API"--当共享值可以直接映射到一个组件的样式或属性时,这个新增加的API允许你避免useAnimatedStyle钩子,从而减少大量的模板。请看下面的例子,一个组件可以被重构以使用这个新的API。当然,这个功能是完全可选的,你可以继续使用useAnimatedStyle,甚至可以用新的内联语法混合动画样式。你可以阅读关于这个功能的更多细节在我们的文档网站

image.png

升级路径

第3版是面向未来的,它支持新的架构(Fabric),因此我们希望尽可能多的人能够过渡到这个新版本。为了尽可能做到无缝连接,我们决定在这一点上不对第二版的API做任何改变,除了Reanimated 1中被废弃的API不再可用之外。我们知道,这使得绝大多数库的用户有资格在今天进行升级,而无需对你的React Native项目进行任何代码修改。

谢谢你,Shopify

如果没有Shopify的支持,动画领域的革命是不可能的。Shopify从Reanimated 2的开发开始就与我们合作,并继续在React Native开源领域进行投资。我们很感谢有机会一起建立Reanimated 3,并期待着在今年发布更多令人振奋的版本!