Animación infinita con React Native

El crear animaciones Loop con React Native es cosa de niños y aquí les traigo un ejemplo de un pulso utilizando esta API.

Para poder trabajar con animación es necesario utilizar los componentes de Animated 

Para poder hacer una animación simple basta con realizar algo como esto:

Animated.timing(this.variable, {
  duration: 1500,
  toValue: 1,
}).start();

Y tendríamos como resultado algo como esto:

Para bien, en ocasiones aparte de animar por un tiempo definido queremos que estas animaciones sean por tiempo indeterminado, una solución para lograr esto es una vez la animación termine iniciarla nuevamente, algo parecido a esto:

animar(){
  Animated.timing(this.rotation, {
    duration: 1500,
    toValue: 1,
  }).start((completion) => {
    if (completion.finished) {
      this.rotation.setValue(0);

      animar();
    }
  });
}

Nuestro método start aparte de iniciar nuestra animación recibe un callback el cual nos notificara una vez la animación haya terminado y en ese momento estaremos llamando nuevamente nuestra animación para que continúe de forma recursiva.

Detener Animacion

Para poder detener esta animacion (Que en algun momento tendremos que hacerlo) mi recomendacion es crear un componente para agrupar este elemento que se esta animando y simplemente no hacerle render a este component. Tener en cuenta la propiedad Easing para que esta animacion se vea sin ninguna pausa.

class AnimacionComponente extends React.Component {
  constructor(props){
    super(props);

    this.rotation = new Animated.Value(0);
  }

  componentDidMount(){
    if(this.props.animar === true) {
      this.animacion()
    }
  }

  animacion = () => {
    Animated.timing(this.rotation, {
      duration: 1500,
      toValue: 1,
      easing: Easing.linear,
    }).start((completion) => {
      if (completion.finished) {
        this.rotation.setValue(0);

        this.animacion();
      }
    });
  }

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

    const transform = {
      transform: [{
        rotate: rotation,
      }]
    }

    return (
      <Animated.Image 
        style={[{width: 100, height: 100}, transform]}
        source={require('./circulo.png')}
      />
    );
  }
}

Ejemplo Completo

Referencia

AnimatedAPI

Share on Google+Share on LinkedInShare on RedditShare on TumblrTweet about this on TwitterShare on Facebook
  • Luis Alberto Romero Calderon

    Primero!