|
| 1 | +# Native Animated |
| 2 | + |
| 3 | +[🏠 Home](../../../../../../../__docs__/README.md) |
| 4 | + |
| 5 | +Native Animated is the cross-platform C++ native driver for React Native's |
| 6 | +`Animated` API. The JavaScript library sends a graph of values, operations, |
| 7 | +styles, and transforms through the `NativeAnimatedModule` TurboModule. Native |
| 8 | +Animated evaluates that graph off the JavaScript thread and applies the |
| 9 | +resulting props to views. |
| 10 | + |
| 11 | +The main purpose of this C++ implementation is to let platforms share the graph |
| 12 | +and driver logic instead of maintaining separate native implementations. It |
| 13 | +integrates Native Animated with the shared |
| 14 | +[Animation Backend](../../animationbackend/__docs__/AnimationBackend.md), which |
| 15 | +updates layout and non-layout props through Fabric and keeps those updates |
| 16 | +synchronized with React commits. |
| 17 | + |
| 18 | +## 🚀 Usage |
| 19 | + |
| 20 | +Application code uses the public JavaScript `Animated` API rather than this |
| 21 | +package directly. A typical animation: |
| 22 | + |
| 23 | +1. Creates and connects animated nodes. |
| 24 | +2. Starts a time-based animation or attaches an event mapping. |
| 25 | +3. Evaluates affected nodes each frame, applies props, and invokes the |
| 26 | + completion callback. |
| 27 | + |
| 28 | +JavaScript batches graph operations with `startOperationBatch` and |
| 29 | +`finishOperationBatch` so they are applied together on the native side. |
| 30 | +`queueAndExecuteBatchedOperations` is specific to the legacy Android |
| 31 | +implementation and is not implemented by this C++ module. |
| 32 | + |
| 33 | +## 📐 Design |
| 34 | + |
| 35 | +Native Animated maintains a directed acyclic graph. Animation drivers and native |
| 36 | +events update value nodes, changes propagate through dependent nodes, and |
| 37 | +`PropsAnimatedNode` collects the props to apply to a view. Dirty tracking limits |
| 38 | +each frame to nodes affected by changed values. |
| 39 | + |
| 40 | +### Core components |
| 41 | + |
| 42 | +- `AnimatedModule` (`AnimatedModule.h`) implements the `NativeAnimatedModule` |
| 43 | + spec. It buffers graph operations from JavaScript and schedules them on the |
| 44 | + render thread. |
| 45 | +- `NativeAnimatedNodesManager` (`NativeAnimatedNodesManager.h`) owns the graph, |
| 46 | + animation drivers, and event drivers. It evaluates updates, schedules prop |
| 47 | + commits, and invokes listeners and completion callbacks. |
| 48 | +- `NativeAnimatedNodesManagerProvider` (`NativeAnimatedNodesManagerProvider.h`) |
| 49 | + creates one shared manager per runtime, connects it to `UIManager`, selects |
| 50 | + the prop-application path, and registers native event delivery. |
| 51 | + |
| 52 | +### Animated nodes |
| 53 | + |
| 54 | +All nodes derive from `AnimatedNode` (`nodes/AnimatedNode.h`). The main groups |
| 55 | +are: |
| 56 | + |
| 57 | +- `ValueAnimatedNode`, which stores the scalar values written by animations and |
| 58 | + events. |
| 59 | +- Operator, interpolation, and color nodes, which derive values from other |
| 60 | + nodes. |
| 61 | +- `StyleAnimatedNode`, `TransformAnimatedNode`, and `ObjectAnimatedNode`, which |
| 62 | + assemble structured output. |
| 63 | +- `TrackingAnimatedNode`, which follows another value through an animation. |
| 64 | +- `PropsAnimatedNode`, which collects output for a view or `ShadowNodeFamily`. |
| 65 | + |
| 66 | +### Animation and event drivers |
| 67 | + |
| 68 | +Drivers derived from `AnimationDriver` (`drivers/AnimationDriver.h`) update a |
| 69 | +single `ValueAnimatedNode` on each frame. Native Animated supports frame-based |
| 70 | +timing, spring, and decay drivers. |
| 71 | + |
| 72 | +`EventAnimationDriver` (`event_drivers/EventAnimationDriver.h`) maps a path in a |
| 73 | +native event payload, such as `contentOffset.y`, to a value node. This lets |
| 74 | +events drive the graph without a JavaScript round trip. |
| 75 | + |
| 76 | +### Applying props |
| 77 | + |
| 78 | +Native Animated supports two prop-application paths: |
| 79 | + |
| 80 | +- The default path directly updates non-layout props and uses a Fabric commit |
| 81 | + for layout props. `MergedValueDispatcher` coalesces updates, while |
| 82 | + `AnimatedMountingOverrideDelegate` prevents React commits from overwriting |
| 83 | + animated values. |
| 84 | +- The shared Animation Backend path delegates per-frame mutations to the |
| 85 | + [Animation Backend](../../animationbackend/__docs__/AnimationBackend.md), |
| 86 | + which applies them and coordinates with React commits. |
| 87 | + |
| 88 | +### Threading |
| 89 | + |
| 90 | +The JavaScript thread only buffers TurboModule operations. Graph mutation, |
| 91 | +driver updates, evaluation, and prop commits run on the render thread using the |
| 92 | +platform frame callback. The manager uses locks for state shared between the two |
| 93 | +threads. |
| 94 | + |
| 95 | +## 🔗 Relationships |
| 96 | + |
| 97 | +- The JavaScript `Animated` library drives Native Animated through the |
| 98 | + `NativeAnimatedModule` TurboModule. |
| 99 | +- Native Animated can delegate prop application to the shared |
| 100 | + [Animation Backend](../../animationbackend/__docs__/AnimationBackend.md). |
0 commit comments