Spring and decay animations in React Native - Cheat Sheet & Quick Revision

Recall & Review

beginner

What is a spring animation in React Native?

A spring animation simulates a spring's movement, creating a natural bounce effect by using tension and friction values.

beginner

What does a decay animation do in React Native?

A decay animation gradually slows down a value over time, simulating friction until it stops.

beginner

Which React Native API is commonly used for spring and decay animations?

The Animated API, especially Animated.spring() for spring animations and Animated.decay() for decay animations.

intermediate

How do you control the speed and bounciness of a spring animation?

By adjusting the 'friction' and 'tension' parameters in Animated.spring(). Lower friction means more bounciness; higher tension means faster movement.

beginner

Why use decay animations in a mobile app?

Decay animations are useful to mimic natural slowing down, like a swipe gesture that slows to a stop, improving user experience.

Which method creates a spring animation in React Native?

A Animated.spring()

B Animated.timing()

C Animated.decay()

D Animated.loop()

Animated.spring() is used to create spring animations with bounce effects.

What does the 'friction' parameter affect in a spring animation?

A The animation's delay

B The bounciness and how quickly it stops

C The animation's color

D The animation's duration

Friction controls how much the spring slows down and how bouncy the animation feels.

Which animation type simulates slowing down over time until stopping?

A Decay animation

B Timing animation

C Spring animation

D Loop animation

Decay animations simulate friction slowing the movement until it stops.

What parameter controls the initial speed in a decay animation?

A delay

B tension

C duration

D velocity

Velocity sets the starting speed for the decay animation.

Which React Native API is best for creating natural-feeling animations?

A Animated.sequence() only

B Animated.timing() only

C Animated.spring() and Animated.decay()

D Animated.delay() only

Spring and decay animations mimic real-world physics for natural movement.

Explain how spring animations work in React Native and how you can customize their behavior.

Think about how a real spring moves and what controls its speed and bounce.

Describe a scenario where a decay animation improves user experience in a mobile app.

Imagine sliding a card and it slows down smoothly to stop.