SwiftUI #1: Status und Kreis Animation

SwiftUI #1 Animierte Kreise
Übersicht
    Add a header to begin generating the table of contents

    Status-Kreis mit Animation

    In diesem kurzen Post möchte ich dir zeigen, wie du sehr einfach mit SwiftUI eine Status-Kreis mit Animation erzeugen kannst. Das ganze dauert nur wenige Minuten und lässt sich anschließend sehr leicht an die eigenen Bedürfnisse und Wünsche anpassen. Das ganze soll dann am Ende ungefähr wie im Video aussehen.

    Der Statuskreis

    Der erste Teil ist der Kreis mit Umlaufbahn. Dieser besteht wiederum auf aus mehreren Unterelementen, welche wir uns im Detail anschauen werden.

    Der erste Kreis

    Der erste Kreis nimmt den größten Teil der Komponente ein und setzt sich aus einem Kreis mit weißem Hintergrund und einem Schatten zusammen. Ohne den Schatten würde der Kreis auf dem weißen Hintergrund nicht sichtbar sein. Gleichzeitig erhält man einen sehr modern wirkenden Effekt, welcher einer glatten Linie als Grenze deutlich überlegen ist. Je nachdem wie groß das Element später sein soll, kann mit dem Radius des Schattens ein wenig experimentieren. Um den Kreis noch weiter hervorzuheben, kann man auch einen dezenten Gradient als Farbe wählen, dieser setzt den Kreis weiter vom Hintergrund ab.

    Der erste Kreis
    Erster Kreis

    Die Umlaufbahn

    Neben dem Kreis ist ein weiteres wesentliches Element die Umlaufbahn. Diese besteht im Grunde auch aus einem Kreis mit durchsichtigem Hintergrund, hat jedoch, anders als beim vorherigem Kreis einen Rand statt eines Schattens. Als Farbe wird die selbe Farbe genommen, die auch für den Schatten ausgewählt wurde. Damit der Rand nicht zu stark in den Vordergrund gedrängt wird fügen wir der Farbe noch opacity(0.3) hinzu. Dies lässt die Umlaufbahn etwas verblassen.

    Kreis mit Umlaufbahn
    Kreis mit Umlaufbahn

    Kreis-Animation

    Nachdem nun alle Grund-Elemente fertig sind, widmen wir uns den animierten Kreisen auf der Umlaufbahn. Diese haben die Eigenschaften offset, startDegree, delay, speed und color und können entsprechend modifiziert werden. Im Grunde bestehen die Animation aus einem Kreis der um den Radius der Umlaufbahn per offset(y: –offset) , Animation also auf der Y-Achse versetzt wird. Der erste rotationEffect gibt den Startpunkt auf der Umlaufbahn vor. Die eigentliche Animation startet über den zweiten rotationEffect dieser wechselt von 0 auf 360 Grad, wenn miniCircleAnimation von false auf true gesetzt wird. Die Animation wird auf linear gesetzt und wiederholt sich über repeatForever(autoreverses: false). Es ist wichtig, dass autoreverses auf false gesetzt wird, damit der Kreis sich nach dem ersten Durchgang nicht rückwärts bewegt. Gestartet wird die Animation bei erscheinen durch .onAppear() {self.miniCircleAnimation.toggle()}.

    Die komplette Komponente

    Um die Komponente komplett zu machen fügt man alle Elemente in einem ZStack zusammen. Und setzt noch einen Text für den Status dazu.

    Kommentar verfassen

    Deine E-Mail-Adresse wird nicht veröffentlicht.

    DAs selfmade-projekt

    Geld verdienen im Internet, wie geht das?

    Scroll to Top