Hintergrundfarbe in React Native animieren

Lesezeit: 3 Minuten

Benutzer-Avatar
Nikolaus

Wie würde ich in React Native von einer Farbe zur anderen animieren? Ich habe festgestellt, dass Sie durch Interpolieren eines Animated.Value Farben animieren können, indem Sie:

var BLACK = 0;
var RED = 1;
var BLUE = 2;

backgroundColor: this.state.color.interpolate({
  inputRange: [BLACK, RED, BLUE],
  outputRange: ['rgb(0, 0, 0)', 'rgb(255, 0, 0)', 'rgb(0, 0, 255)']
})

und

Animated.timing(this.state.color, {toValue: RED}).start();

Aber mit dieser Methode, die von SCHWARZ nach BLAU geht, müssen Sie durch Rot gehen. Fügen Sie der Mischung mehr Farben hinzu und Sie landen in einer Disco der 1980er Jahre.

Gibt es eine andere Möglichkeit, dies zu tun, mit der Sie direkt von einer Farbe zur anderen wechseln können?

  • In Ihrem Beispiel verwenden Sie inputRange: [BLACK, RED, BLUE]. Wenn Sie dies ändern zu [BLACK, BLUE] Animiert die Farbe von Schwarz zu Blau so, wie Sie es erwarten würden?

    – Martin Konicek

    17. September 2015 um 11:31 Uhr

  • Das würde funktionieren, ist aber das Gegenteil von dem, was ich brauche. Ich muss der Liste Farben hinzufügen und je nach Benutzeraktion von einer zur anderen wechseln. Also zum Beispiel von SCHWARZ nach BLAU, dann von BLAU nach GRÜN, dann von GRÜN nach gelb.

    – Nikolaus

    17. September 2015 um 15:58 Uhr

  • Haben Sie dieses Problem gelöst? Ich kämpfe auch gerade mit den gleichen Sachen. Es ist wirklich seltsam, weil es so aussieht, als wäre es ein echtes Problem für RN

    – Velidan

    19. März 2021 um 14:50 Uhr

Benutzer-Avatar
Neciu

Vorausgesetzt, Sie haben Animated.Value sagen wir xkönnen Sie die Farbe wie folgt interpolieren:

render() {
    var color = this.state.x.interpolate({
        inputRange: [0, 300],
        outputRange: ['rgba(255, 0, 0, 1)', 'rgba(0, 255, 0, 1)']
    });

    return (
        <Animated.View style={{backgroundColor:color}}></Animated.View>
    );
}

Sie finden ein vollständiges Arbeitsbeispiel in der Ausgabe, in der ich gepostet habe github.

  • Die neuste React-Native-Version hat möglicherweise einen Fehler – beim Versuch, diesen Code von Weiß nach Blau zu interpolieren, und es wird ein „received bad props“-Fehler mit „rgba(255,255,255,1)“ angezeigt, wo „rgba(255,255,255,1.0)“ erwartet wird. Untersuchen.

    – Dylan Pierce

    15. August 2016 um 20:48 Uhr


  • Ah, ich habe versucht, dem obigen Codebeispiel eine Animation hinzuzufügen, und habe vergessen, Animated.View anstelle der regulären Ansicht zu verwenden. Der Wechsel zu hat mein Problem behoben.

    – Dylan Pierce

    17. August 2016 um 16:26 Uhr

  • Ich bekomme Style property 'backgroundColor' is not supported by native animated module

    – onmyway133

    22. Februar 2019 um 14:01 Uhr

  • @onmyway133 verwendest du einen nativen Treiber? Wenn ja, schalten Sie es auf falsch

    – ebillis

    6. März 2019 um 9:32 Uhr

  • Bin es nur ich oder hilft diese Antwort OP nicht, das Problem zu lösen, von Farbe A zu Farbe C zu wechseln, ohne Farbe B zu durchlaufen? Dies alles interpoliert von Rot nach Grün. Es zeigt nicht, wie Sie mit einem Interpolationsbereich direkt zwischen Farben wechseln können, unabhängig von der Reihenfolge, in der sie im Ausgabebereich der Interpolation platziert sind.

    – Süße Füße

    21. Oktober 2020 um 21:19 Uhr

Benutzer-Avatar
cmrichards

Wenn Sie die Farbe des animierten Farbwerts in dem Moment erhalten könnten, in dem Sie die Schaltfläche gedrückt haben, könnten Sie es wahrscheinlich tun. Etwas wie das :

var currentColor = ? : 
this.state.color = 0; 
var bgColor = this.state.color.interpolate({
  inputRange: [0, 1],
  outputRange: [currentColor, targetColor]
});

Sie würden also für jede Schaltfläche eine andere targetColor festlegen.

Ich habe hier ein Beispiel erstellt, das dies mit der neuesten Version von React Native tun soll.

https://cjoshmartin.com/blog/react-native-animations-example/

kannst du auch hier weiterlesen:
https://www.codeaily.io/courses/Master-React-Native-Animations/Color-Background-Color
https://reactnative.dev/docs/animations

Benutzer-Avatar
Lukas W

Sie können auch in Schritten für nicht numerische Werte wie Farbe interpolieren, wie folgt:

<Animated.Text
  style={{
    color: colorAnim.interpolate({
      inputRange: [0, 0.5, 1],
      outputRange: ['black', 'gray', 'white']
  })
}}>

const animatedBkg = interpolate(scale, {
  inputRange: [0, 150],
  outputRange: [Animated.color(242, 81, 48), Animated.color(0,0,0)],
  // extrapolate: Extrapolate.CLAMP,
})

getestet mit reanimiert.

  • Was ist Animated.Color?

    – Nik

    11. November 2020 um 16:29 Uhr

Benutzer-Avatar
Browniefed

Verwenden setValue und Zustand, um Start- und Endfarben zu steuern.

  • Was ist Animated.Color?

    – Nik

    11. November 2020 um 16:29 Uhr

1080450cookie-checkHintergrundfarbe in React Native animieren

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy