Repeat animation with new animated api

Question

React-native introduce new Animated API, I want to make a loop animation such as a bubble scale up then scale down and repeat that progress.

However I can not figure it out. I've tried write some code like below

class TestProject extends React.Component {    constructor(): void {     super();     this.state = {       bounceValue: new Animated.Value(0),       v: 1,     };   }    componentDidMount() {     this.state.bounceValue.setValue(1.5);      let animation = Animated.timing(this.state.bounceValue, {       toValue: this.state.v,     });      setInterval(() => {       animation.stop();        if (this.state.flag) {         this.state.v = 0.5;         this.state.bounceValue.setValue(0.5);       }       else {         this.state.v = 1.5;         this.state.bounceValue.setValue(1.5);       }        animation.start();     }, 5000);    }    render(): ReactElement {     return (       <View style={styles.imageContainer}>         <Image           style={styles.image}           source={{uri: 'http://image142-c.poco.cn/best_pocoers/20130517/91062013051716553599334223.jpg'}}         />         <Animated.Text           style={[             styles.test,             {transform: [               {scale: this.state.bounceValue},             ],}           ]           }>           haha         </Animated.Text>       </View>     );   }  } 

but not works very well.

Any suggestion will be appreciate.

Answer 1

There's now loop animation available:

Animated.loop(   Animated.sequence([     Animated.timing(this.state.animatedStartValue, {       toValue: 1,       duration: 500,       delay: 1000     }),     Animated.timing(this.state.animatedStartValue, {       toValue: 0,       duration: 500     })   ]),   {     iterations: 4   } ).start()