How to repeat React Native animation within Animation Sequence

Question

I am new to react native development and I am trying to have an animated sequence repeat an animation within that sequence.

I tried to set the value to 0 again but that did not seem to work. I want the sequence to animate the first then second and then the first again. I did not want to put it in a loop because I want to be able to change the sequence later. I know the createAnimation function is being called all three times but the animation isn't running again.

import React, { Component } from 'react';
import {
  Platform,
  Animated,
  StyleSheet,
  Text,
  View,
  Button,
  Alert,
  TouchableHighlight,
} from 'react-native';


const AnimatedButton = Animated.createAnimatedComponent(TouchableHighlight);

export default class Animater extends Component {
  showAlert = () => {
     console.log("show: ");
    Alert.alert('You need to...');
  };

  componentWillMount() {
    this.animatedValue = new Animated.Value(0);
    this.animatedValue2 = new Animated.Value(0);
  }



animate = () =>{

this.animatedValue.setValue(0)
  const createAnimation = function (value, duration, delay = 0) {

  value.setValue(0);

    return Animated.timing(
      value,
      {
        toValue: 150,
        duration,
        delay
      }
    )
  }


    Animated.sequence([
    createAnimation(this.animatedValue, 500),
    createAnimation(this.animatedValue2, 500, 1000),  
    createAnimation(this.animatedValue, 500, 1000),       
  ]).start()

}



  render() {
    const interpolateColor = this.animatedValue.interpolate({
      inputRange: [0, 100, 150],
      outputRange: ['rgb(0,0,0)', 'rgb(51,250,170)' , 'rgb(0,0,0)'],
    });

    const interpolateColor2 = this.animatedValue2.interpolate({
      inputRange: [0, 150],
      outputRange: ['rgb(0,0,0)', 'rgb(51,0,86)'],
    });


    const animatedStyle = {
      backgroundColor: interpolateColor,
    };
    const animatedStyle2 = {
      backgroundColor: interpolateColor2,
    };
    return (
    <View>
     <View style={styles.containerR}>
        <AnimatedButton style={[animatedStyle, styles.buttonR]}          
         onPress={this.animate}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This w w w </Text>
        </AnimatedButton>

       <AnimatedButton style={[animatedStyle2, styles.buttonR]}          
         onPress={this.showAlert}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This  is</Text>
        </AnimatedButton>
    </View>
    <View style={styles.containerC}>
       <AnimatedButton style={[animatedStyle2, styles.buttonR]}          
         onPress={this.showAlert}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This  is</Text>
        </AnimatedButton>

       <AnimatedButton style={[animatedStyle2, styles.buttonR]}          
         onPress={this.showAlert}
         activeOpacity={1}
         underlayColor={'#ea5256'}>
          <Text> This  is</Text>
        </AnimatedButton>
    </View>
    </View>

    );
  }
}

const styles = StyleSheet.create({
  buttonR: {

   // backgroundColor: '#de1738',
    padding: 10,
    borderRadius: 100,
    width: 100,
    height: 100
  },
    containerC: {
      //flex: 1,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 10
    },
    containerR: {
      //flex: 3,
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'center',
      paddingHorizontal: 10
    },

});

I expected the animatedValue animation to run again but it did not.

hong developer · Accepted Answer · 2019-08-13 04:54:06Z

6

You can simply repeat the animation using loop

Animated.loop(
  Animated.sequence([
    Animated.delay(1000),
    Animated.timing(this.animatedValue, {
      toValue: 150,
      duration: 500
    })
  ]),
  {
    iterations: 10 // Number of repetitions
  }
).start()

Use the recursive function to repeat infinite repetition.

createAnimation() {
    Animated.sequence([
     Animated.delay(1000),
     Animated.timing(this.animatedValue, {
       toValue: 150,
       duration: 500
       })
    ]).start(() => {
      // Logic whenever an iteration finishes...
      createAnimation()
    });
}

componentDidMount() {
    createAnimation();

answered Aug 13, 2019 at 4:54

hong developer

13.9k4 gold badges46 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Gintak27 Over a year ago

Is there a way to do it without the loop. I would like to be able to change the sequence dynamically

hong developer Over a year ago

@Kai_JanaHenry I also made a way to turn the cycle using recursive calls.

Gintak27 Over a year ago

But doesn't that keep the sequence of the animation the same. What I want to do is dynamically change the sequence so I may want animation1, animation2, animation1 or animation2, animation1, animation2. Sorry if this is what you explained I just want to ensure I fully understand since I am new to react native

hong developer Over a year ago

@Kai_JanaHenry If you want to do that, make a second animation function, then run the second function in the start.

Collectives™ on Stack Overflow

How to repeat React Native animation within Animation Sequence

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related