Explicar animaciones en React Native

Animaciones en React Native: React Native tiene una API animada que maneja animaciones en la aplicación. Tiene varias funciones para crear la mayoría de los tipos de animación (por ejemplo, desvanecimiento, cambio de color, cambio de ancho y alto, cambio de posición). Principalmente usaremos Animated.parallel, Animated.timing, Animated.value y Animated.View this example.

Implementación: Ahora comencemos con la implementación:

• Paso 1: Abra su terminal e instale expo-cli con el siguiente comando.

  npm install -g expo-cli

• Paso 2: ahora cree un proyecto con el siguiente comando.

  expo init animationDemo

 

• Paso 3: Ahora ve a la carpeta de tu proyecto, es decir, animationDemo

  cd animationDemo

Estructura del proyecto: Tendrá el siguiente aspecto.

Estructura de directorios

Pasos para crear una animación:

1. Definición de estado: Importaremos Animated desde ‘react-native’. Luego declararemos nuestro estado que luego será cambiado por la función de animación. En esto, estamos usando «derecha» que cambiará la <Vista animada> de izquierda a derecha y viceversa. Y el estado de «radio» que cambiará borderRadius de la Vista durante la animación.
2. Definición de funciones de animación: definiremos dos funciones de izquierda a derecha y de derecha a izquierda que animarán la vista cuando se las llame. En esto, estamos usando la función Animated.parallel() que se usa para ejecutar múltiples animaciones simultáneamente. Y la función Animated.timing() que toma el estado, la duración de la animación, el valor final como parámetro. El Start() para iniciar la animación.
3. Creando la Vista: Ahora crearemos una Vista usando <Animated.View> y con estilo pasaremos el estado de animación.

Nota: Use <Animated.View> para crear una vista que se animará según el estado animado. Normal <View> generará un error de límite de pila excedido.

import React, { Component } from 'react';
import { Text, View, Animated, Dimensions, Button } from 'react-native';
  
class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      right: new Animated.Value(
        Dimensions.get('window').width - 200),
      radius: new Animated.Value(0),
    };
  }
  
  leftToRight = () => {
    Animated.parallel([
      Animated.timing(this.state.radius, {
        toValue: 200,
        duration: 1000,
        useNativeDriver: false,
      }),
      Animated.timing(this.state.right, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: false,
      }),
    ]).start();
  };
  
  rightToLeft = () => {
    Animated.parallel([
      Animated.timing(this.state.radius, {
        toValue: 0,
        duration: 1000,
        useNativeDriver: false,
      }),
      Animated.timing(this.state.right, {
        toValue: Dimensions.get('window').width - 200,
        duration: 1000,
        useNativeDriver: false,
      }),
    ]).start();
  };
  
  render() {
    return (
      <View style={{ flex: 1 }}>
        <Animated.View
          style={{
            marginTop: '30%',
            backgroundColor: 'red',
            height: 200,
            width: 200,
            right: this.state.right,
            position: 'absolute',
            justifyContent: 'center',
            borderRadius: this.state.radius,
          }}>
          <Text
            style={{
              textAlign: 'center',
              color: 'white',
            }}>
            Animated View
          </Text>
        </Animated.View>
        <View
          style={{
            position: 'absolute',
            bottom: 0,
            width: '100%',
            height: '20%',
            justifyContent: 'space-evenly',
          }}>
          <Button title="Left to right" 
            onPress={() => this.leftToRight()} />
          <Button title="right to left" 
            onPress={() => this.rightToLeft()} />
        </View>
      </View>
    );
  }
}
  
export default App;

Inicie el servidor utilizando el siguiente comando.

npm run android

Producción:

Producción

Interpolación: supongamos que queremos usar «%» en lugar de un número para definir nuestra propiedad de estilo correcta. Si pasamos «%» como en <Animated.View> e intentamos cambiarlo en nuestra función Animated.timing() , lo haremos obtener un error Aquí es donde ayuda la interpolación. Asigna rangos de entrada a rangos de salida (por ejemplo, 0-100 en 0%-100%). Solo tenemos que aplicar la interpolación en <Animated.View> estilo prop derecho y el resto del código será el mismo.

<Animated.View
  style={{
    marginTop: '30%',
    backgroundColor: 'red',
    height: 200,
    width: 200,
    right: this.state.right.interpolate({
      inputRange: [0, 100],
      outputRange: ['0%', '100%'],
    }),
    position: 'absolute',
    justifyContent: 'center',
    borderRadius: this.state.radius,
  }}>
  <Text
    style={{
      textAlign: 'center',
      color: 'white',
    }}>
    Animated View
  </Text>
</Animated.View>

Referencia: https://reactnative.dev/docs/animations