React Native: ¿Cómo se anima la rotación de una imagen?

Después de de esta prolongada recopilación de información hemos podido solucionar este atascamiento que pueden tener muchos los lectores. Te regalamos la solución y deseamos serte de gran apoyo.

De hecho, puedes animar cadenas usando el interpolate método. interpolate toma un rango de valores, típicamente 0 a 1 funciona bien para la mayoría de las cosas, y los interpola en un rango de valores (estos pueden ser cadenas, números, incluso funciones que devuelven un valor).

Lo que haría es tomar un valor animado existente y pasarlo a través de la función de interpolación de esta manera:

spinValue = new Animated.Value(0);

// First set up animation 
Animated.timing(
    this.spinValue,
  
    toValue: 1,
    duration: 3000,
    easing: Easing.linear, // Easing is an additional import from react-native
    useNativeDriver: true  // To make use of native driver for performance
  
).start()

// Next, interpolate beginning and end values (in this case 0 and 1)
const spin = this.spinValue.interpolate(
  inputRange: [0, 1],
  outputRange: ['0deg', '360deg']
)

Luego utilícelo en su componente de esta manera:

En caso de que desee hacer la rotación en bucle, agregue el Animated.timing en el Animated.loop

Animated.loop(
 Animated.timing(
   this.spinValue,
   
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
    useNativeDriver: true
   
 )
).start();

No te olvides de agregar propiedad usarNativeDriver para asegurarse de obtener el mejor rendimiento de esta animación:

// First set up animation 
Animated.timing(
    this.state.spinValue,
  
    toValue: 1,
    duration: 3000,
    easing: Easing.linear,
    useNativeDriver: true
  
).start();

Una nota para los novatos como yo: para animar algo más, debes envolverlo para que esto funcione. De lo contrario, el compilador entrará en pánico en esa propiedad de transformación:

import Animated from 'react-native';
...
//animation code above
...

   

PERO para una imagen (Imagen animada), el ejemplo anterior es 100% bueno y correcto.

Si posees algún cuestión y capacidad de aclararse nuestro post puedes añadir una glosa y con mucho placer lo analizaremos.

---

---

Utiliza Nuestro Buscador