RN Lez 32: Animated — Avanzato

Docs: Animated, Easing

Obiettivi

• Usare spring, sequence, parallel, stagger
• Personalizzare easing
• Collegare animazioni allo scroll

---

1. spring — rimbalzo naturale

Animated.spring(valore, {
    toValue: 1,
    friction: 7,       // ← attrito (default: 7, più alto = meno rimbalzo)
    tension: 40,       // ← tensione (default: 40, più alto = più veloce)
    useNativeDriver: true,
}).start();

---

2. sequence — animazioni in serie

Animated.sequence([
    Animated.timing(animX, { toValue: 100, duration: 500, useNativeDriver: true }),
    Animated.timing(animY, { toValue: 200, duration: 500, useNativeDriver: true }),
    Animated.timing(opacity, { toValue: 0, duration: 300, useNativeDriver: true }),
]).start();

---

3. parallel — animazioni in parallelo

Animated.parallel([
    Animated.timing(opacity, { toValue: 1, duration: 1000, useNativeDriver: true }),
    Animated.spring(scale, { toValue: 1, friction: 4, useNativeDriver: true }),
    Animated.timing(translateY, { toValue: 0, duration: 800, useNativeDriver: true }),
]).start();

---

4. stagger — animazioni sfasate

Esegue animazioni in sequenza con un ritardo tra l’una e l’altra.

// 3 elementi appaiono uno dopo l'altro con 200ms di ritardo
Animated.stagger(200, [
    Animated.timing(anim1, { toValue: 1, duration: 300, useNativeDriver: true }),
    Animated.timing(anim2, { toValue: 1, duration: 300, useNativeDriver: true }),
    Animated.timing(anim3, { toValue: 1, duration: 300, useNativeDriver: true }),
]).start();

---

5. interpolate — mappare valori

const spin = useRef(new Animated.Value(0)).current;

const rotation = spin.interpolate({
    inputRange: [0, 1],
    outputRange: ['0deg', '360deg'],
});

<Animated.View style={{ transform: [{ rotate: rotation }] }} />

---

6. Easing — curve di accelerazione

import { Easing } from 'react-native';

Animated.timing(val, {
    toValue: 1,
    duration: 1000,
    easing: Easing.bounce,          // rimbalzo alla fine
    // easing: Easing.elastic(2),   // effetto elastico
    // easing: Easing.back(1.5),    // va indietro poi avanti
    // easing: Easing.linear,       // lineare
    // easing: Easing.bezier(0.25, 0.1, 0.25, 1), // curva custom
    useNativeDriver: true,
}).start();

---

7. Animated.event — scroll-linked

Collega animazioni allo scroll di ScrollView/FlatList.

const scrollY = useRef(new Animated.Value(0)).current;

// Header che si rimpicciolisce scrollando
const headerScale = scrollY.interpolate({
    inputRange: [0, 200],
    outputRange: [1, 0.5],
    extrapolate: 'clamp',     // ← non va oltre i range
});

<View>
    <Animated.View style={{
        height: 100,
        backgroundColor: '#3498db',
        transform: [{ scale: headerScale }],
    }} />
    <Animated.ScrollView
        onScroll={Animated.event(
            [{ nativeEvent: { contentOffset: { y: scrollY } } }],
            { useNativeDriver: false }
        )}
        scrollEventThrottle={16}
    >
        <Text>Contenuto lungo...</Text>
    </Animated.ScrollView>
</View>

---

8. Tabella riassuntiva

Metodo	Descrizione
spring()	Rimbalzo naturale
sequence()	Una dopo l’altra
parallel()	Tutte insieme
stagger(r, [])	Sfasate di r ms
interpolate()	Mappa range valori
Easing.*	Curve di accelerazione
Animated.event	Collega a eventi scroll

---

9. Esercizio

🎯 “Lista animata”

Crea una FlatList dove ogni elemento:

1. Appare con uno stagger di 100ms (fadeIn + slideUp)
2. Al click: scala a 0.95 e torna a 1 (sequenza)
3. Header si restringe scrollando (Animated.event)
4. Usa Easing.elastic per effetto rimbalzo