Repeat animation with new animated api

后端 未结 8 876
时光取名叫无心
时光取名叫无心 2021-01-31 14:40

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 n

8条回答
  •  囚心锁ツ
    2021-01-31 15:34

    I use the sequence method to pass an array of animations to cycle and then repeat the function.

    //this.state.animatedStartValue = 0;
    
    function cycleAnimation() {
      Animated.sequence([
        Animated.timing(this.state.animatedStartValue, {
          toValue: 1,
          duration: 500,
          delay: 1000
        }),
        Animated.timing(this.state.animatedStartValue, {
          toValue: 0,
          duration: 500
        })
      ]).start(() => {
        cycleAnimation();
      });
    }
    

    If I'm toggling that animation on it's own it will fade in/out, however I layer it on top of a base to mimic an active state or hotspot-style button

      
        
        
      
    

    React Native Sequence Documentation

提交回复
热议问题