animation - parallel - react-native-motion

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

Question

La rotación es una transformación de estilo y en RN, puedes rotar cosas como esta

 render() {
return (
<View style={{transform:[{rotate: ''10 deg''}]}}>
<Image source={require(''./logo.png'')} />
</View>
);
}

Sin embargo, para animar cosas en RN, debes usar números, no cadenas. ¿Todavía puedes animar transformaciones en RN o tengo que crear algún tipo de hoja de sprites y cambiar el Imagerr a algunos fps?

Answer 1

Desafortunadamente no hay suficiente reputación para comentar arriba.

Muy buen ejemplo. No olvides agregar la propiedad useNativeDriver para asegurarte de que obtienes 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();

Answer 2

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

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

// First set up animation
Animated.timing(
this.state.spinValue,
{
toValue: 1,
duration: 3000,
easing: Easing.linear
}
).start()
// Second interpolate beginning and end values (in this case 0 and 1)
const spin = this.state.spinValue.interpolate({
inputRange: [0, 1],
outputRange: [''0deg'', ''360deg'']
})

Luego úselo en su componente de esta manera:

<Animated.Image
style={{transform: [{rotate: spin}] }}
source={{uri: ''somesource.png''}} />