El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
HOME Els meus cursos Finalitzats
◄ Anterior
◄

Animacions

Següent ►
►

Les animacions són una part essencial de qualsevol aplicació mòbil moderna, ja que milloren l'experiència de l'usuari fent que la interfície sigui més atractiva i interactiva. En aquest tema, aprendrem com crear animacions a React Native utilitzant l'API d'Animació de React Native.

Continguts

  1. Introducció a les animacions
  2. Animacions bàsiques amb Animated
  3. Interpolació
  4. Animacions seqüencials i paral·leles
  5. Animacions amb LayoutAnimation
  6. Exercicis pràctics
  7. Conclusió

Introducció a les animacions

React Native proporciona dues maneres principals de crear animacions:

  • Animated API: Una API potent i flexible per crear animacions complexes.
  • LayoutAnimation API: Una API més senzilla per animar canvis de disseny.

Animacions bàsiques amb Animated

L'API Animated és molt flexible i permet crear animacions complexes. A continuació, veurem un exemple bàsic d'animació utilitzant Animated.

Exemple: Animació de translació

import React, { useRef, useEffect } from 'react';
import { Animated, View, Button, StyleSheet } from 'react-native';

const BasicAnimation = () => {
  const translation = useRef(new Animated.Value(0)).current;

  const startAnimation = () => {
    Animated.timing(translation, {
      toValue: 300,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, { transform: [{ translateY: translation }] }]} />
      <Button title="Start Animation" onPress={startAnimation} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default BasicAnimation;

Explicació del codi

  1. Creació de l'animació: Utilitzem useRef per crear una referència a un valor animat (Animated.Value).
  2. Configuració de l'animació: Utilitzem Animated.timing per definir una animació de translació vertical (translateY).
  3. Inici de l'animació: Quan es prem el botó, l'animació comença i la caixa es mou cap avall.

Interpolació

L'interpolació permet mapar un rang de valors d'entrada a un rang de valors de sortida. Això és útil per crear animacions més complexes.

Exemple: Interpolació de translació i opacitat

import React, { useRef, useEffect } from 'react';
import { Animated, View, Button, StyleSheet } from 'react-native';

const InterpolationAnimation = () => {
  const animation = useRef(new Animated.Value(0)).current;

  const startAnimation = () => {
    Animated.timing(animation, {
      toValue: 1,
      duration: 1000,
      useNativeDriver: true,
    }).start();
  };

  const translateY = animation.interpolate({
    inputRange: [0, 1],
    outputRange: [0, 300],
  });

  const opacity = animation.interpolate({
    inputRange: [0, 1],
    outputRange: [1, 0],
  });

  return (
    <View style={styles.container}>
      <Animated.View style={[styles.box, { transform: [{ translateY }], opacity }]} />
      <Button title="Start Animation" onPress={startAnimation} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

export default InterpolationAnimation;

Explicació del codi

  1. Interpolació de translació: Utilitzem interpolate per mapar el valor d'animació de 0 a 1 a un rang de 0 a 300 per a la translació vertical.
  2. Interpolació d'opacitat: Utilitzem interpolate per mapar el valor d'animació de 0 a 1 a un rang de 1 a 0 per a l'opacitat.

Animacions seqüencials i paral·leles

Podem combinar múltiples animacions utilitzant Animated.sequence i Animated.parallel.

Exemple: Animacions seqüencials

const startSequentialAnimation = () => {
  Animated.sequence([
    Animated.timing(translation, {
      toValue: 300,
      duration: 1000,
      useNativeDriver: true,
    }),
    Animated.timing(opacity, {
      toValue: 0,
      duration: 500,
      useNativeDriver: true,
    }),
  ]).start();
};

Exemple: Animacions paral·leles

const startParallelAnimation = () => {
  Animated.parallel([
    Animated.timing(translation, {
      toValue: 300,
      duration: 1000,
      useNativeDriver: true,
    }),
    Animated.timing(opacity, {
      toValue: 0,
      duration: 1000,
      useNativeDriver: true,
    }),
  ]).start();
};

Animacions amb LayoutAnimation

LayoutAnimation és una API més senzilla per animar canvis de disseny, com ara l'addició o eliminació de components.

Exemple: Animació de canvis de disseny

import React, { useState } from 'react';
import { View, Button, LayoutAnimation, StyleSheet } from 'react-native';

const LayoutAnimationExample = () => {
  const [expanded, setExpanded] = useState(false);

  const toggleExpand = () => {
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);
    setExpanded(!expanded);
  };

  return (
    <View style={styles.container}>
      <View style={[styles.box, expanded && styles.expandedBox]} />
      <Button title="Toggle Expand" onPress={toggleExpand} />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
  expandedBox: {
    width: 200,
    height: 200,
  },
});

export default LayoutAnimationExample;

Explicació del codi

  1. Configuració de l'animació: Utilitzem LayoutAnimation.configureNext per configurar l'animació de disseny.
  2. Canvi de disseny: Quan es prem el botó, la caixa canvia de mida amb una animació suau.

Exercicis pràctics

Exercici 1: Animació de rotació

Crea una animació que faci girar una vista 360 graus.

Exercici 2: Animació de color

Crea una animació que canviï el color de fons d'una vista de blau a vermell.

Solucions

Solució 1: Animació de rotació

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

Solució 2: Animació de color

const backgroundColor = animation.interpolate({
  inputRange: [0, 1],
  outputRange: ['blue', 'red'],
});

Conclusió

En aquest tema, hem après com crear animacions a React Native utilitzant l'API Animated i LayoutAnimation. Hem vist exemples pràctics d'animacions bàsiques, interpolació, animacions seqüencials i paral·leles, i animacions de disseny. Les animacions són una eina poderosa per millorar l'experiència de l'usuari i fer que les aplicacions siguin més atractives i interactives. Practica amb els exercicis proporcionats per consolidar els teus coneixements i explorar més possibilitats amb les animacions a React Native.

◄ Anterior
◄
Següent ►
►
El Projecte | Sobre nosaltres | Contribuir | Donacions | Llicència
© Copyright 2024. Tots els drets reservats