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)']
})
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
Neciu
Vorausgesetzt, Sie haben Animated.Value sagen wir xkönnen Sie die Farbe wie folgt interpolieren:
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
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.
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