แอนิเมชันแบบสปริงและการลดความเร็ว

Linear timing animations feel mechanical because real-world objects rarely move at a constant speed. Physics-based animations simulate natural forces like springs and momentum, making UI motion feel alive and natural. React Native's Animated API provides two physics engines: Animated.spring for elastic bounce and Animated.decay for momentum-based deceleration.

Choosing the right animation type dramatically affects perceived quality. Timing suits opacity fades; spring suits interactive elements like buttons and cards; decay suits swipe-to-dismiss gestures.

Animated.spring simulates a spring pulling a value toward a target. The value overshoots the target and oscillates until it settles — the classic bouncy effect. At minimum you provide toValue and useNativeDriver.

Spring animations feel natural for elements that respond to user interaction, such as a button scaling up on press or a modal sliding in from below. The default spring parameters are already tuned to feel good on mobile, but you can customize them.

The feel of a spring animation is controlled by two parameters: tension and friction. Tension controls how fast the spring pulls toward the target — higher tension means faster, snappier motion. Friction controls how quickly the oscillations dampen out — lower friction means more bouncing.

The default tension is 40 and friction is 7. For a quick, responsive feel try tension 100, friction 10. For a slow, wobbly effect try tension 20, friction 3. Experiment to find the right feel for your UI.

React Native also supports a more physics-accurate spring model using stiffness, mass, and damping. These correspond to physical properties of a spring system — stiffness is the spring constant, mass is the object weight, and damping is the drag coefficient.

This model is compatible with iOS UIKit spring animations and Framer Motion on the web, making it easier to match animations designed in prototyping tools. Use either the tension/friction model or the stiffness/mass/damping model — not both at once.

A common spring animation pattern is scaling a button down slightly on press and back to full size on release, giving satisfying tactile feedback. Use Pressable with onPressIn and onPressOut to trigger spring animations on the scale value.

The quick spring-down on press and spring-back on release makes buttons feel physical and responsive. This is more satisfying than a simple opacity change and is widely used in polished mobile apps.

Animated.decay simulates momentum: it starts a value moving at a given velocity and gradually slows it down over time, as if friction were acting on it. There is no target value — the animation runs until momentum runs out.

Decay is the natural complement to swipe gestures. When a user flicks a card or list, the release velocity from the gesture feeds directly into a decay animation, making the element continue moving and decelerate naturally — exactly how mobile apps behaved before digital UI.

The typical decay pattern: track the finger position during a pan gesture, and when the finger lifts pass the final velocity from the gesture to Animated.decay. The deceleration value (default 0.997) controls how quickly the item slows — closer to 1 means longer glide, closer to 0 means quick stop.

After decay finishes, you typically snap the item to a final state using a spring animation if needed (e.g., snapping a card back to center or to a dismissed position).

Understanding when to use each animation type is key to natural-feeling UI:

• Animated.timing — predictable, fixed duration. Best for UI feedback like opacity changes and progress bars where exact timing matters.
• Animated.spring — elastic, overshoots target. Best for responsive interactive elements like buttons, cards, and modal entrances.
• Animated.decay — momentum-based, no fixed end. Best for continuing motion after gesture releases like swipes and flicks.

Springs also have a velocity parameter that sets the initial velocity of the spring, making them connect naturally to gesture motion. When a user drags a card and releases, you can start a spring with the gesture's velocity to continue the motion smoothly.

This creates a seamless handoff between gesture and animation — the card feels like it was thrown by the user's hand rather than teleported to its resting position.

Animated.ValueXY is a convenience wrapper that holds a pair of Animated.Values for x and y coordinates. It simplifies 2D animations like dragging cards. Spring and decay both work with ValueXY, and it has helper methods like getTranslateTransform() to produce the transform array automatically.

ValueXY reduces boilerplate when you need to animate an element's position in 2D space, as you don't need to manage two separate Animated.Values manually.

You can reset an Animated.Value to its initial state by calling .setValue(initialValue). This is useful before re-running an animation — for example, resetting a scale to 0 before running another pop-in spring, or resetting position before replaying an entry animation.

Always reset synchronously before starting the animation to avoid a flash. Call setValue inside the same event handler or useEffect, immediately followed by Animated.spring(...).start().

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

In this lesson you learned: Animated.spring creates physics-based bouncy motion tuned with tension and friction, Animated.decay simulates momentum-based deceleration from a starting velocity, and each animation type suits different interaction patterns — spring for tap feedback, decay for gesture release. Next up we explore composing multiple animations in parallel and sequence.