JavaScript: Reanimated 4 introduces new CSS-based animation API
Reanimated 4 brings a CSS animation API for React Native, reworks state animations and adapts worklets and the behavior of Spring animations.
(Image: Trismegist san/Shutterstock.com)
The developer studio Software Mansion has released version 4 for Reanimated. The open-source JavaScript library makes it possible to execute animations in React Native on the UI thread in order to achieve a smoother display. The update brings a new, declarative API based on CSS standards as well as internal changes to the architecture. According to the company, it is the most comprehensive update to date since the introduction of so-called worklets with Reanimated 2.
The CSS-based API is primarily aimed at developers who implement state-controlled animations. These are animations that are triggered by changes in the application state –, for example when a value such as "is open" or "selected" changes. According to the development team behind Reanimated, the API is intended to simplify the code and facilitate optimization. The syntax is based on common web standards and is intended to make it easier for developers with web experience to get started.
Empfohlener redaktioneller Inhalt
Mit Ihrer Zustimmung wird hier ein externes YouTube-Video (Google Ireland Limited) geladen.
Ich bin damit einverstanden, dass mir externe Inhalte angezeigt werden. Damit können personenbezogene Daten an Drittplattformen (Google Ireland Limited) übermittelt werden. Mehr dazu in unserer Datenschutzerklärung.
Worklets outsourced in their own package
Developers should continue to implement complex animations – such as those controlled by gestures or scrolling – using worklets. The manufacturer has already outsourced these to a separate package (react-native-worklets) with version 3.17 in order to make development more independent, so that hardly any adjustments are required for existing projects with the current changeover.
Videos by heise
Largely compatible with Reanimated 3
According to the blog post, Reanimated 4 is largely compatible with the previous version. Some obsolete functions have been removed, but will remain as inactive placeholders for the time being. The behavior of spring animations has also been adjusted: New default values should lead to more stable sequences without affecting existing, user-defined settings.
(Image:Â Software Mansion)
The prerequisite for using Reanimated 4 is the New Architecture for React Native, a framework for developing mobile apps with JavaScript. Applications that have already been converted to this can introduce the new version without any major changes , according to the announcement.
(mdo)
