RN Lez 33: LayoutAnimation e Transforms

Docs: LayoutAnimation, Transforms

Obiettivi

• Usare LayoutAnimation per animazioni layout automatiche
• Applicare transform (rotate, scale, perspective)
• Combinare animazioni e layout

---

1. LayoutAnimation

Anima automaticamente le modifiche al layout (aggiunta/rimozione elementi, cambio dimensioni).

import { LayoutAnimation, UIManager, Platform } from 'react-native';

// Android: serve abilitare
if (Platform.OS === 'android') {
    UIManager.setLayoutAnimationEnabledExperimental(true);
}

// Prima di modificare lo stato:
const expandCard = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    // ↑ anima automaticamente la prossima modifica di layout!
    setEspanso(!espanso);
};

Presets

LayoutAnimation.Presets.easeInEaseOut   // lento all'inizio e fine
LayoutAnimation.Presets.linear          // costante
LayoutAnimation.Presets.spring          // rimbalzo

Personalizzato

LayoutAnimation.configureNext({
    duration: 500,
    create: { type: 'easeInEaseOut', property: 'opacity' },
    update: { type: 'spring', springDamping: 0.6 },
    delete: { type: 'easeInEaseOut', duration: 200 },
});

---

2. Esempio: Card espandibile

const [espanso, setEspanso] = useState(false);

const toggleEspandi = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
    setEspanso(!espanso);
};

<View style={styles.card}>
    <TouchableOpacity onPress={toggleEspandi}>
        <Text style={styles.titolo}>Dettaglio {espanso ? '▲' : '▼'}</Text>
    </TouchableOpacity>
    {espanso && (
        <View>
            <Text>Contenuto espanso...</Text>
            <Text>Altra riga...</Text>
            <Text>Ancora...</Text>
        </View>
    )}
</View>

---

3. Transform — in profondità

<View style={{
    transform: [
        { perspective: 1000 },    // ← necessario per rotate 3D
        { rotateX: '45deg' },
        { rotateY: '30deg' },
        { rotateZ: '10deg' },     // alias: rotate
        { scaleX: 1.2 },
        { scaleY: 1.2 },
        { translateX: 50 },
        { translateY: -20 },
        { skewX: '10deg' },
    ],
    width: 100,
    height: 100,
    backgroundColor: '#3498db',
}} />

---

4. Esempio: Card che si gira

const [girata, setGirata] = useState(false);

<Animated.View style={{
    transform: [
        { perspective: 1000 },
        {
            rotateY: girata ? '180deg' : '0deg',
        },
    ],
    width: 200,
    height: 200,
    backgroundColor: '#3498db',
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
}}>
    <Text style={{ color: 'white' }}>
        {girata ? '👈 Retro' : '👉 Fronte'}
    </Text>
</Animated.View>

---

5. Tabella riassuntiva

API	Codice	Uso
LayoutAnimation	LayoutAnimation.configureNext(LayoutAnimation.Presets.spring)	Animare cambi layout
Transform rotate	transform: [{ rotate: '45deg' }]	Rotazione
Transform scale	transform: [{ scale: 1.5 }]	Ingrandimento
Transform translate	transform: [{ translateX: 50 }]	Spostamento
Perspective	transform: [{ perspective: 1000 }]	3D effect

---

6. Esercizio

🎯 “Lista espandibile con LayoutAnimation”

Crea una lista di 3 card. Ogni card:

1. Mostra titolo + icona ▼
2. Clicca → si espande con LayoutAnimation spring
3. Mostra contenuto extra (testo lungo)
4. Rinclicca → si contrae con easeInEaseOut

Bonus: aggiungi una card con un transform rotateY all’avvio (da 0° a 360° con timing).