Terrain 10 — Animations & gestes

9 drills · ~10 min · Chapitres liés : Partie 10

1. Pourquoi les animations Reanimated restent fluides quand le thread JS est occupé ?

✅

Les worklets (styles animés, gestes) s’exécutent sur le thread UI : l’animation vit côté natif, insensible au JS. C’est l’idée de rupture vs l’ancien Animated.

2. Écrivez le duo minimal : un bouton qui scale à 0,96 au pressIn (spring) et revient.

✅


const scale = useSharedValue(1)
const style = useAnimatedStyle(() => ({ transform: [{ scale: scale.value }] }))
// onPressIn: scale.value = withSpring(0.96) · onPressOut: withSpring(1)

3. timing vs spring : la règle de choix ?

✅

Quantités (progression, opacité, fondu) → timing (durée+easing). Objets (boutons, cartes, déplacements) → spring (physique, interruptible).

4. Appeler router.push à la FIN d’une animation : le code exact ?

✅


opacity.value = withTiming(0, { duration: 250 }, f => {
  if (f) runOnJS(goToResults)()
})

Le callback est un worklet → runOnJS obligatoire pour rappeler React.

5. <Text>{sharedValue.value}</Text> : le problème ?

✅

Affichage figé : la valeur vit côté UI, React n’est pas notifié de ses mutations. Afficher via useAnimatedProps/ReText, ou dériver un état React.

6. L’anneau du timer : quelle prop SVG est animée, avec quel hook ?

✅

strokeDashoffset (dasharray = circonférence : offset 0 = plein, circonférence = vide), via useAnimatedProps + Animated.createAnimatedComponent(Circle).

7. L’explication qui apparaît après une réponse : l’outil le plus simple ?

✅

Une Layout Animation : entering={FadeInDown.duration(220)} (+ exiting) — une prop, zéro shared value.

8. Les trois temps d’un Gesture.Pan, de tête ?

✅

onBegin : mémoriser (start = offset courant) → onChange : suivre (start + translationX) → onEnd : décider (seuil → action, sinon withSpring(0, { velocity })).

9. Le swipe-to-delete cohabite avec le scroll de la liste grâce à… ?

✅

activeOffsetX([-10, 10]) : le Pan ne capture qu’après 10 px HORIZONTAUX — en deçà, la FlatList scrolle. (Et toute suppression au geste exige son toast « Annuler ».)

👉 Terrain suivant : 11 — Builds & commandes