Animated.Value 与 Animated.View

The Animated API is React Native's built-in library for creating smooth, performant animations. It works by tracking special animated values that can be driven by timing or physics engines and then connected to component style properties. Unlike CSS transitions on the web, React Native animations are expressed entirely in JavaScript but can be offloaded to native threads for performance.

The Animated API ships with every React Native installation — no extra packages needed. You import it directly from react-native.

The core primitive is Animated.Value, which holds a numeric value that can change over time. You create one with new Animated.Value(initialValue) and store it in a ref so it persists across renders without triggering re-renders itself.

Using useRef is the recommended pattern because the animated value is mutable — you want the same object throughout the component's lifecycle. Initializing inside useState would create a new value on every render.

Animated.View is a special version of View whose style prop can accept Animated.Value references. When the animated value changes, the view updates without going through the normal React reconciliation cycle, making it very efficient.

Animated equivalents exist for other core components too: Animated.Text, Animated.Image, and Animated.ScrollView. You can also create animated versions of custom components using Animated.createAnimatedComponent().

Animated.timing smoothly changes an Animated.Value from its current value to a target value over a specified duration. It accepts a config object with toValue, duration, and an optional easing function.

Calling .start() begins the animation. You can pass a callback to .start(callback) that fires when the animation completes, which is useful for chaining effects or updating state after an animation finishes.

A classic use case is fading a component in when it first mounts. You initialize the opacity value at 0 and run a timing animation to 1 inside useEffect with an empty dependency array so it fires once after the component renders.

The component renders immediately (invisible at opacity 0) and then smoothly becomes visible over the animation duration. This technique prevents jarring content flashes on slow data loads.

Animated opacity is also used to hide components. Fading to opacity 0 keeps the component in the layout (it occupies space) while making it invisible. To fully remove it after fading, update a state variable in the animation's completion callback.

This pattern is common for modals, toasts, and notifications that should animate out before being unmounted from the component tree.

Beyond opacity, Animated.Value can drive position transforms like translateX and translateY. Transforms are applied in the transform style array. This lets you slide elements onto the screen from any direction.

Using transform instead of changing left or top is critical for performance because transforms do not trigger a layout pass — they are composited on the GPU, enabling 60fps animations even on lower-end devices.

The scale transform grows or shrinks a component around its center point. Starting a component at scale: 0 and animating to 1 creates a pop-in effect, while animating from 1 to 0 creates a pop-out effect.

Scale animations feel natural for confirmation actions like a heart button in a social app or a checkmark appearing after a form submission. Combine scale with opacity for an even more polished result.

Animated.Value.interpolate() maps the raw numeric value to a different output range. This is extremely useful when you want one animated value to drive multiple different style changes simultaneously.

For example, you can interpolate a single progress value from 0 to 1 into both a color string (going from red to green) and a pixel offset (going from 0 to 100). The inputRange and outputRange arrays define the mapping points.

You can animate almost any numeric style property with Animated.Value, including borderRadius, width, height, and even colors when using interpolate. Animating a square to a circle by changing border radius creates fluid shape morphing effects.

Note that color animation requires useNativeDriver: false because color changes are not supported by the native driver. This means color animations run on the JS thread and are slightly less performant than transform animations.

Animated.loop wraps another animation and repeats it indefinitely (or a set number of times with the iterations option). It is perfect for loading spinners, pulsing indicators, and continuous background effects.

To create a pulsing effect, animate opacity from 1 to 0.3 and back inside a loop. Always call .stop() on the loop animation when the component unmounts by returning it from the useEffect cleanup function to prevent memory leaks.

Test your understanding of React Native Mobile Development concepts from this lesson.

In this lesson you learned: Animated.Value holds a numeric value that can change over time, Animated.timing drives smooth transitions with a configurable duration and easing, and Animated.View accepts animated values in its style prop for opacity and transform animations. Next up we explore spring and decay physics-based animations.