Wie man einen Flip-Timer in React Native erstellt

Foto von Vico Luna auf Unsplash

Einführung

Ein Flip Timer ist ein digitales Zeitmessgerät, bei dem die Zeit durch Zahlen angezeigt wird, die nacheinander durch eine Split-Flap-Anzeige angezeigt werden.

In diesem Artikel wird der Aufbau eines Flip-Timers in React Native unter Verwendung der bereitgestellten APIs und ohne zusätzliche Abhängigkeiten beschrieben.

Herausforderungen zu überwinden

  • Implementieren Sie die Transformationsursprungseigenschaft mithilfe der Matrizentechniken Ihres College Math Course, da sie in React Native nicht unterstützt wird. Das Drehen um den zentrierten Ursprung (standardmäßig) ist einfach, aber wir müssen den Ursprung verschieben und um die Kanten drehen.
  • Implementierung der Flip Number Komponente.
  • Overflow überwinden: Verstecktes Problem in Android, da es nicht mit absolut positionierten Elementen funktioniert.

Inhalt

  1. Implementieren Sie die Flip-Number-Komponente
  2. Implementieren Sie FoldView
  • Grundlayout
  • Die Herausforderung meistern
  • Transformationen hinzufügen
  • Hinzufügen der Animationen

3. Aktualisieren Sie die Timer-Komponente

4. Endergebnis

5. Links

Implementieren Sie die Flip-Number-Komponente

Grundlayout

Das Grundlayout besteht aus zwei Karten - obere und untere, die so zusammengefügt sind, dass die Ansicht wie ein Flip-Timer aussieht.

Zahlenkarte

Es ist ein grundlegendes Layout, das aus einer Hülle und zwei Karten besteht - untere und obere.

Hinweis: Der unteren Karte wird die vorherige Nummer hinzugefügt. Die Verwendung wird bekannt gegeben, sobald wir die FoldView-Implementierung erreicht haben.

Bildnachweis: Carbon. | Code: GitHub

Karte

Der Umschlag der Karte ist übergelaufen: verborgen, und wir übersetzen seine Elemente (Nummer) basierend auf dem Kartentyp (oberer oder unterer).

Bildnachweis: Carbon. | Code: GitHub

Implementieren Sie FoldView

Grundlayout

Um FoldView zu erstellen, benötigen wir zwei FlipCards, die den NumberCards ähneln, aber absolut positioniert sind, damit sie sich über den NumberCards befinden, wenn Flip-Animationen angewendet werden.

Zahlenkarte

Hinzufügen der FlipCard-Komponente zur NumberCard-Komponente.

Bildnachweis: Carbon. | Code: GitHub

Klappkarte

Die FlipCard-Komponente ist ein animierter Wrapper mit absoluter Positionierung, der beim Anwenden der Flip-Animation verwendet wird.

Herausforderung (Teil 2 und Teil 3): Überlauf: Versteckt mit absoluter Positionierung hat große Probleme in Android. Mit diesem StackOverflow-Pfosten kann er mithilfe eines Überlaufbehälters im absolut positionierten Element gelöst werden.

Bildnachweis: Carbon. | Code: GitHub

Endergebnis

Die Herausforderung meistern

Jetzt kommt der schwierige Teil. Wir müssen die FlipCard-Komponente entlang der Kanten falten.

Da React Native die Transformationsursprungseigenschaft nicht unterstützt, müssen wir einen anderen Weg finden, um den Rotationsursprung an der unteren Kante zu verschieben.

Glücklicherweise gibt es einen Weg, dieses Problem zu lösen. Laut diesem großartigen Artikel und Lesen der MDN-Dokumente für die Eigenschaft transform-origin kann sie mithilfe von Matrizen implementiert werden.

Utils

React Native macht mehrere Matrixoperationen in der Datei MatrixMath.js verfügbar. Die wichtigsten, die wir benötigen, sind

  • Identitätsmatrix: Gibt eine 4 * 4-Identitätsmatrix zurück [1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0, 1]
Bildnachweis: Carbon. | Code: GitHub
  • Multiplikationsmatrix: Diese Hilfsmethode generiert eine Ausgabe basierend auf der Multiplikation der 4 * 4-Matrizen a und b, die als Eingabe bereitgestellt werden.
Bildnachweis: Carbon. | Code: GitHub
  • Matrix drehen: Es handelt sich um eine benutzerdefinierte Hilfsmethode, bei der eine 4 * 4-Matrix und der Grad, bis zu dem sie gedreht wird, verwendet werden, um sie dann mit der ursprünglichen Matrix zu multiplizieren und das generierte Ergebnis zurückzugeben.
Bildnachweis: Carbon. | Code: GitHub
  • Perspektivische Matrix: Mit dieser Hilfsmethode können wir den perspektivischen Stil zum Reagieren mit Native verwenden und dann mit der ursprünglichen 4 * 4-Matrix multiplizieren.
Bildnachweis: Carbon. | Code: GitHub
  • Matrix übersetzen: Diese Hilfsmethode übersetzt den Ursprung und ändert die ursprüngliche 4 * 4-Matrix
Bildnachweis: Carbon. | Code: GitHub
  • Nicht übersetzte Matrix: Mit dieser Dienstprogrammmethode wird die Übersetzung des Ursprungs aufgehoben und die ursprüngliche 4 * 4-Matrix geändert
Bildnachweis: Carbon. | Code: GitHub

Transformationen hinzufügen

deg ist der Grad, um den gedreht werden soll, und y ist die Höhe der Komponente, in die übersetzt werden soll.

Herausforderung (Teil 1): Durch die Kombination der oben genannten Utils wird transform-origin erfolgreich implementiert.

Bildnachweis: Carbon. | Code: GitHub

Hinzufügen der Animationen

Bildnachweis: Carbon. | Code: GitHub

Timer-Komponente aktualisieren

Addieren Sie Time Util

Diese Funktion erhöht den Timer um eine Sekunde und stellt Stunden, Minuten und Sekunden ein.

Bildnachweis: Carbon. | Code: GitHub

Timer-Komponente

Die Timer-Komponente ruft Time Util auf und aktualisiert die Komponente basierend auf Stunden, Minuten und Sekunden

Bildnachweis: Carbon. | Code: GitHub

Flip Number Component

Diese Komponente teilt die Nummer lediglich auf der Grundlage ihrer Ziffernplatzierung in zwei Teile und ruft die NumberCard-Komponente auf.

Bildnachweis: Carbon. | Code: GitHub

Endergebnis

Links

Ich habe ein Paket dafür veröffentlicht, das anpassbarere Eigenschaften enthält.

  • npm: react-native-flip-timer
  • GitHub: React-Native-Flip-Timer

Weitere coole Sachen finden Sie in meinen StackOverflow- und GitHub-Profilen.

Folgen Sie mir auf LinkedIn, Medium, Twitter, um weitere Informationen zu neuen Artikeln zu erhalten.

Ein Klatschen, zwei Klatschen, drei Klatschen, vierzig?

Ursprünglich veröffentlicht auf blog.pritishvaidya.com am 2. März 2019.