Doris Liu, a software engineer on the Compose UI team at Google, dives into the dynamic world of animations in Compose. She discusses the evolution of animation specifications, addressing challenges like real-time tracking and handling interruptions. Doris elaborates on shared element transitions and the significance of targeting animations for better user experience. With a focus on new APIs and enhancing performance, she also reflects on the impact of Kotlin's design choices. Tune in for insights that make animating in Compose both exciting and efficient!
Compose's animation APIs provide a unified approach to implement common animations like fading or sliding with high-level user-friendly options.
The animation specification in Compose abstracts behavior description, allowing seamless transitions between different animation types without API complexities.
Target-based animations in Compose enable developers to maintain initial and target values dynamically, enhancing interactivity and managing multiple animations more effectively.
Deep dives
Unified Animation APIs in Compose
Compose animation APIs are designed to be more unified compared to previous frameworks. High-level APIs like animated content and animated visibility allow easy implementation of common use cases, such as fading or sliding elements in and out. However, while these APIs are user-friendly, they contain built-in assumptions that may not cater to more specific customization needs. For those advanced scenarios, developers are encouraged to utilize lower-level APIs for greater flexibility, despite their more complex setup requirements.
Animation Specifications and Metrics
Animation specification (animation spec) in Compose describes how animations should behave rather than what is being animated. It provides developers with a unified approach to define animations using various primitives, such as keyframes and spring specifications. This level of abstraction makes it easier to switch between spring-based and time-based animations without needing to worry about the underlying API details. Ultimately, by streamlining this process, Compose enhances both the ease of use and consistency in animation across applications.
Target-Based and Stateful Animations
Compose introduces target-based animations that maintain their initial and target values without being stateful. This means developers can query the animation metrics at any given time during the animation's lifecycle, allowing for features like scrubbing and seeking. Such flexibility is a significant advancement over previous systems that relied heavily on rigid duration methods, enabling simultaneous animations while tracking velocity changes smoothly. This approach addresses the complexities faced when managing multiple animations and interactions effectively.
Handling Interruptions and Layered Transitions
The new animation framework in Compose is designed to handle interruptions more naturally, allowing simultaneous animations to blend and adjust based on user interactions. For instance, if a user drags an item while an upward animation is in progress, the animation can seamlessly transition to a horizontal movement without abrupt changes. Additionally, layered transitions that animate elements from one state to another rely on a system that effectively manages layout changes without jank. The architecture enables developers to easily specify transitions while ensuring that UI components respond fluidly to runtime changes.
Advanced Animation Techniques and Experimental APIs
Recent innovations in Compose include advanced animation techniques such as shared element transitions, which facilitate smoother transitions between different UI states. These transitions allow visual elements to maintain their properties during animations while minimizing clipping issues often encountered in previous frameworks. Additionally, the introduction of experimental APIs like animate bounds enhances the animation framework by optimizing how components react to size changes in parent layouts. These advancements reflect ongoing efforts to improve UI experiences and gather real-world feedback for refining the framework further.
In this episode Chet, Romain and Tor chat with Doris Liu from the Compose team about animations in Compose -- covering everything from the basic primitives up to the recently added Shared Element Transitions.
Chapters: Intro (00:00) Animation capabilities of Compose (1:06) Different types of animation specs (3:43) Layers of functionality, transitions (7:49) TargetBasedAnimation (9:48) Vectors & velocity of color change (12:43) Second layer parallel to animation spec (16:39) Animation interruptions (18:48) Motion layout problem-solving (20:19) Both scale and move in question (25:45) Different mental models for layout animation in Compose vs. View (26:20) Shared element (31:05) Are there things you wish more people were aware of? (34:19) What's the tooling story for this? (41:57) What is Look Ahead? (43:16) All software is regret (48:49) New API: Modifier.animateBounds (51:52) How to reach Doris – leave a comment (55:57) Motion Frame of Reference Placement (57:29) Wrap up (59:10)
Links: Shared element tutorial → https://goo.gle/3XrGYp5 Shared element talk → https://goo.gle/47tm3qm A quick guide to compose animations → https://goo.gle/3Tm853p The API layers except the highest level APIs we chatted about in the podcast → https://goo.gle/3MGsiNE
