Wie man svg-animation mit Animierten in reagieren-native

ReactNative:

<ScrollView style={styles.container}>
    <Svg
      height="100"
      width="100">
        <Circle
          cx="50"
          cy="50"
          r="50"
          stroke="blue"
          strokeWidth="2.5"
          fill="green"/>
      </Svg>
</ScrollView>

Ich will Kreis-Skala mit Animiert.Wert. Ich habe dies ausprobiert :

    let AnimatedScrollView = Animated.createAnimatedComponent(ScrollView);
    let AnimatedCircle = Animated.createAnimatedComponent(Circle);

    <ScrollView style={styles.container}>
            <Svg
              height="100"
              width="100">
                <AnimatedCircle
                  cx="50"
                  cy="50"
                  r={this.state.animator}
                  stroke="blue"
                  strokeWidth="2.5"
                  fill="green"/>
              </Svg>
        </ScrollView>

Dann flash zurück mit kein Fehler.

Wie kann ich tun?

update 2016.8.24

Ich eine neue Methode gefunden, statt requestAnimationFrame :

Konstruktor: 

this.state = {
      animator: new Animated.Value(0),
      radius: 1,
    };

    this.state.animator.addListener((p) => {
      this.setState({
        radius: p.value,
      });
    });

render: 

<Circle
    cx="50"
    cy="50"
    r={this.state.radius}
    stroke="blue"
    strokeWidth="2.5"
    fill="green"/>

Aber hier die guides Rat gibt, verwenden Sie es sparsam, da es möglicherweise Auswirkungen auf die Leistung in der Zukunft.

also, was ist der beste Weg ?

  • Ich habe versucht, diesen Ansatz, aber der Hörer wurde nie genannt. Ich bin mit Reagieren.createClass().
  • Haben Sie jemals finden eine gute Lösung für diese, die sich nicht um die Aktualisierung der Staat mit dem Hörer? Danke!
  • Gefunden eine ideale Lösung, macht Gebrauch von Ihrem addListener aber ersetzt setState mit setNativeProps machen Sie viel performant.
  • Welches Paket verwenden Sie zum Rendern von SVG-Grafiken in RN?
  • Könntest du nicht einfach verwenden Transformation: [{ Skala: animatedValue }] auf die Animierte.Anzeigen um ihn herum? Vielleicht bin ich falsch.
InformationsquelleAutor CoderLim | 2016-08-23
  1. 15

    Verwenden setNativeProps für Viel Bessere Leistung.

    Hab ich etwas mehr basteln und fand eine weitere leistungsfähige Methode, die macht die Verwendung von addListener und setNativeProps.

    Konstruktor

    constructor(props) {
  super(props);

  this.state = { circleRadius: new Animated.Value(50) };

  this.state.circleRadius.addListener( (circleRadius) => {
    this._myCircle.setNativeProps({ r: circleRadius.value.toString() });
  });

  setTimeout( () => {
    Animated.spring( this.state.circleRadius, { toValue: 100, friction: 3 } ).start();
  }, 2000)
}

    Rendern

    render() {
  return(
    <Svg height="400" width="400">
      <AnimatedCircle ref={ ref => this._myCircle = ref } cx="250" cy="250" r="50" fill="black" />
    </Svg>
  )
}

    Ergebnis

    Und dies ist, wie die animation aussieht, wenn der 2 Sekunden (2000 Millisekunden) timeout-Trigger.

    Wie man svg-animation mit Animierten in reagieren-native

    So, das wichtigste was Sie ändern musste, war die Verwendung von setNativeProps anstatt setState in Ihrem Hörer. Dies macht einen systemeigenen Aufruf und umgeht re-die Berechnung des gesamten Bauteils, in meinem Fall war sehr Komplex und langsam zu tun.

    Danke für führende mich in Richtung der Zuhörer Ansatz!

    • Was ist mit useNativeDriver und interpolate so dass wir nicht haben, um auf dem neuesten Stand? Ich brauche eine animierte SVG-Grafiken und wollen versuchen, dass.
    • Give it a shot, und lassen Sie mich wissen, wie es geht.
    • Danke Josh! 🙂 Ich auf jeden Fall aktualisieren Sie. Habe vergessen zu +1 diese Lösung genial von dir, habe es jetzt 🙂
    • Ich habe versucht, die Umsetzung einer animation auf die Breite und Höhe der svg in dieser Weise, ich habe es irgendwie funktioniert, aber es ist die Leistung sehr schlecht ist und wirklich schlecht, wenn ich mehr als eine zu einem Zeitpunkt ausgeführt. Haben Sie ein komplettes Beispiel, wie Sie das getan hat? @Noitidart haben Sie ein Beispiel für die Verwendung NativeDriver und interpolate so dass wir nicht haben, um auf dem neuesten Stand?
    • Ich habe nie tauchte ein in diese. Bin neugierig, obwohl, wie Ihre getan.
    InformationsquelleAutor Joshua Pinter
  2. 1

    habe ich eine einfache svg-Animationen-Bibliothek basiert auf einem Projekt, von einer anderen person, für jetzt, nur Pfade, die animiert werden können, aber noch mehr Formen und Animationen werden in Zukunft Hinzugefügt werden

    https://www.npmjs.com/package/react-native-svg-animations

    InformationsquelleAutor Jeremy Patrick Pacabis
  3. 0

    Keine besseren Antworten, und ich implementiert durch hinzufügen der listener Animated.Value variabel, Sie können Holen Sie mehr info aus meiner Beschreibung der Frage.

    InformationsquelleAutor CoderLim
Schreibe einen Kommentar