Wiederholen Sie die Animation mit neuen animierten API

Question

React-native Einführung neue Animated API, möchte ich eine Schleife Animation wie eine Blase zu vergrößern, dann skalieren und wiederholen Sie diesen Fortschritt.

Allerdings kann ich es nicht herausfinden. Ich habe versucht, schreiben einige Code wie unten

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> 
    ); 
    } 

} 

aber funktioniert nicht sehr gut.

Jeder Vorschlag wird zu schätzen wissen.

Answer 1

Ich verwende die Sequenzverfahren ein Array von Animationen zu Zyklus passieren und dann die Funktion wiederholen.

//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(); 
    }); 
} 

Wenn ich diese Animation Makeln auf seine eigene wird es verblassen in/out, aber ich es oben auf einer Basisschicht

<TouchableOpacity> 
    <Animated.Image 
     source={activeImageSource} 
     style={this.state.animatedStartValue}} 
    /> 
    <Image source={nonActiveImageSource} 
    /> 
    </TouchableOpacity> 

einen aktiven Zustand oder Hotspot-Stil-Taste zu imitieren React Native Sequence Documentation

Answer 2

Es scheint, dass "Looping" von der Animated API für jetzt nicht unterstützt wird.

Ich habe das geschafft, indem ich die Animation erneut starte, wenn sie fertig ist.

startAnimation() { 
    Animated.timing(this._animatedValue, { 
    toValue: 100, 
    duration: 1000, 
    }).start(() => { 
    this.startAnimation(); 
    }); 
} 

freuen uns auf eine bessere Lösung ...

Answer 3

Sie eine andere Animation einstellen können dann wieder die Animation nennen:

Ein Beispiel I Text tat zu verblassen und -Ausgang:

textAnimate: function() { 
    Animated.timing(
     this.state.textOpacity, 
     { 
     toValue: 0.3,       
     duration: 500, 
     } 
    ).start(() => { 
     Animated.timing( 
     this.state.textOpacity,    
     { 
      toValue: 1,      
      duration: 500,   
     } 
    ).start(() => { 
      this.textAnimate(); 
     }); 
    });  
    }, 

    componentDidMount: function() { 
    this.state.textOpacity.setValue(1) 
    this.textAnimate(); 
    }, 

Answer 4

verbesserte Version von @bcomerford Antwort

//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(event => { 
    if (event.finished) { 
     cycleAnimation(); 
    } 
    }); 
} 

Answer 5

Es gibt jetzt loop animation verfügbar:

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() 

Answer 6

so etwas wie dieses Versuchen:

componentDidMount() { 
 
    this.bootAnimation(); 
 
    } 
 

 
    bootAnimation() { 
 
    this.animation = Animated.loop(
 
     Animated.timing(this.state.progress, { 
 
     toValue: 1, 
 
     duration: 5000 
 
     }) 
 
    ).start(); 
 
    }