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''}} />