Eine Übersetzung des Artikels wurde speziell für Studenten des ReactJS / React Native-Developer- Kurses erstellt.
Eine mobile Anwendung ohne Animation ist kaum vorstellbar. Animationen im Web sind normalerweise einfach, wenn sie überhaupt existieren (maximal - eine Seite ersetzt eine andere). Animationen in mobilen Anwendungen erfordern eine völlig andere Aufmerksamkeit.
CSS3 verfügt über eine relativ einfache API, mit der Sie einfache Animationen erstellen können. In React Native verfügen Sie jedoch nicht über dieses Tool. Ja, selbst wenn es so wäre, würde es nicht ausreichen.
Was müssen Sie also wissen, wenn Sie mit React Native arbeiten und vollwertige Animationen implementieren müssen?
React Native hat ein Tool wie Animated, aber es sieht einschüchternd aus ... zumindest auf den ersten Blick.
Wenn Sie möchten, gibt es also drei „Gruppen von Dingen“ oder „Blöcke“, die Sie kennen müssen, um mit Animationen arbeiten zu können.
Block 0: Das Bedürfnis nach Veränderung
Animationen sind ein Wechsel von einem Zustand in einen anderen:
- Übergang von "versteckt" zu "sichtbar";
- Übergang von einem Kreis zu einem Quadrat.
Überlegen Sie, was vor und nach der Animation angezeigt werden soll.
Überlegen Sie sich Übergänge und welche Stile Sie dafür ändern müssen:
- Sollte das Objekt mit einer Änderung der Transparenz erscheinen oder sollte es nur von oben „fallen“?
- Sollte sich der Kreis nur in ein Quadrat verwandeln oder sollte er mitten im Prozess zu einem Dreieck werden?
Block 1: Ein visueller Status, der als Animated.Value
Aus logischer Sicht kann jede Komponente entweder angezeigt oder ausgeblendet werden - dies sind die Bedeutungen von „wahr“ und „falsch“, hier gibt es keinen Mittelweg. Als Status wird angezeigt, ob das Objekt als wahr oder falsch angezeigt wird.
In einer guten Benutzeroberfläche verstecken sich Objekte nicht plötzlich und erscheinen auch nicht plötzlich. Sie werden nach und nach angezeigt und helfen dem Benutzer, die Benutzeroberfläche zu verstehen.
Somit wird klar, dass der visuelle Zustand etwas zwischen einem wahren Zustand und einem falschen Zustand sein kann.
Wie so?
Wir können eine weitere Variable einführen, um eine Reihe von visuellen Zuständen darzustellen. Wir brauchen, dass dies eine Zahl ist, denn egal welchen logischen Zustand wir haben, Zahlen helfen uns, Zwischenwerte darzustellen.
this._shown = new Animated.Value(0);
Während ein logischer Zustand binär sein kann (d. H. Entweder
true oder
false , 1 oder 0), ist der visuelle Zustand eine Gleitkommazahl.
Block 2: Übergänge, bekannt als Animated.timing
Angenommen, eine Komponente ist ausgeblendet: Dies bedeutet, dass der logische Status ihrer Sichtbarkeitsparameter falsch und der visuelle Status ebenfalls 0,0 ist. Aber was passiert, wenn wir eine Komponente zeigen wollen? Der logische Zustand sollte sofort wahr werden, während der visuelle Zustand allmählich zuerst bei 0,1, 0,2, ... und schließlich vollständig bei 1,0 vergehen sollte.
Dazu benötigen wir eine Möglichkeit, dem visuellen Zustand den Übergang zu 1.0 mitzuteilen.
Und es gibt solche Wege. In der Tat gibt es sogar einige.
Der einfachste Weg ist im Grunde:
Animated.timing(this._shown, { toValue: 1, duration: 300, }).start();
Hier sagen wir
Animated , um
_shown im Intervall von 300 ms auf
1.0 zu ändern.
Es gibt andere Übergänge und Möglichkeiten, mehrere Übergänge zu organisieren, aber jetzt können wir
Animated.timing .
Block 3: Als Animated.View bekannte Pixel. Animated.View und interpolate
Unsere
_shown Übergänge zwischen
0.0 und
1.0 bedeuten nichts, wenn wir sie nicht sehen können. Wie machen wir das?
Wir müssen irgendwie
_shown , um die Transparenz der
_shown Komponente
_shown .
Angenommen, wir hatten diesen Code, bevor wir mit der Arbeit mit Animationen begannen:
<View style={{ opacity: this.state.shown ? 1 : 0 }}> <SomeComponent /> </View>
Wir setzen die Transparenz auf
0 wenn wir die Komponente ausblenden, und auf
1 wenn wir sie anzeigen.
Können wir den vorhandenen
Animated.Value und
_shown , um den Übergang von
0 nach
1 zu animieren?
Stilanimation
Wir können jeden
Animated.Value wenn wir mit Stilen arbeiten.
Wir müssen nur die
View in
Animated.View ändern, und jetzt haben wir Folgendes:
const opacity = this._shown;
Ist das nicht ein Artikel über Animationen? Warum gibt es noch keine Bilder?
Noch etwas: Interpolation
Dieses Wort klingt beängstigend, aber die Idee selbst ist recht einfach. Die Interpolation ermöglicht es uns, einen visuellen Zustand innerhalb von 0 und 1 beizubehalten, aber die Möglichkeit zu geben, mit etwas anderem „übereinzustimmen“.
Angenommen, anstatt nur eine geerbte Komponente zu erstellen, möchten wir, dass unsere Komponente "von oben herausfällt". Und wir können dies tun, indem wir die verborgene Komponente 40px höher platzieren und ihre Bewegung an die gewünschte Position animieren, wenn der Status sichtbar wird.
Wir können unsere Werte von 0 bis 1 mit Werten von -40 bis 0 mit dem üblichen
interpolate abgleichen“:
const top = this._shown.interpolate({ inputRange: [0, 1], outputRange: [-40, 0], });
Dadurch wird ein neuer
Animated.Value , dessen Wert zwischen -40 und 0 liegt.
Mit anderen Worten, es ist
-40 wenn
_shown 0 ,
-20 wenn
_shown =
0.5 und
0 wenn
_shown 1.0 .
Dunkles Geheimnis: Mit interpolate Sie auch Werte für Farben und Grade ändern.Schlussfolgerungen:
- Der visuelle Zustand ist ein numerischer Wert, er sollte den Übergang von einem Stil zu einem anderen widerspiegeln.
Animated.Value können Sie den numerischen Wert des visuellen Status wiedergeben.Animated.timing kann verwendet werden, um Animated.Value auf eine andere Zahl zu verschieben.Animated.Value kann für Stile verwendet werden, wenn View durch Animated.View .
Mit der Interpolation können Sie einen
Animated.Value Bereich einem anderen
Animated.Value , z. B. einem Bereich von
0 bis
1 bis zu einem Bereich von
5 bis
25 oder sogar einem Bereich zwischen Schwarz und Grün.
Quellen:
In diesem Artikel haben wir uns mit den Grundelementen der Animation in React Native getroffen und ein Verständnis für die Grundidee gewonnen. Hier finden Sie Ressourcen, mit denen Sie dieses Thema genauer untersuchen können: