Hallo allerseits!

Weihnachten ist lange vorbei, aber danach haben wir eine interessante Geschichte darüber, wie man die selten verwendete Core Animation-Funktion verwendet, um eine festliche Stimmung für Benutzer zu schaffen. Ich teile die Übersetzung eines Artikels meines Londoner Kollegen Alexis.

Weihnachten war für mich immer einer meiner Lieblingstage des Jahres. Es bringt viel Liebe, Lachen, Glück und Magie in unser Leben.

Ich bin in Spanien auf Teneriffa geboren und aufgewachsen - einer sonnigen Insel mitten im Atlantik vor der Küste Afrikas. Und glauben Sie mir, Weihnachten auf Teneriffa unterscheidet sich sehr von Weihnachten in London, wo ich ihn in den letzten zwei Jahren kennengelernt habe (seit ich bei Badoo angefangen habe).

Einer der Vorteile des Lebens in London war für mich, über Schneeflocken nachzudenken. Hier habe ich sie zum ersten Mal in meinem Leben gesehen, es war einfach unglaublich!

Als ich mich daran erinnerte, beschloss ich, Ihnen eine interessante Geschichte zu erzählen, die mir kurz vor Weihnachten im Büro passiert war, bevor ich nach Teneriffa ging, um die Feiertage mit meiner Familie zu feiern.

Es ist einfach so passiert, dass mir eine ungewöhnliche Aufgabe mit der folgenden Beschreibung zugewiesen wurde:



Hmm, ziemlich lustig. Wir wollten unserer iOS-Anwendung Weihnachtsanimationen mit Schneeflocken hinzufügen, und ich hatte das Glück, sie zu erstellen. Aber ich wusste nicht, wo ich anfangen sollte.

Wie üblich wurde der Aufgabe eine Skizzendatei mit dem erforderlichen Design angehängt, die ungefähr so ​​aussah:



Zumindest habe ich gesehen, was wir brauchten, aber ich war mir nicht ganz sicher, wie sich diese Schneeflocken verhalten sollten. Um alle Details zu klären, habe ich mich mit den Designern unterhalten.

Wie ich vermutet hatte, hatten sie bereits eine großartige Animation in After Effects gezeichnet.

Die Designer erklärten mir, dass sie Schneeflocken, die von oben fallen, in die bereits vorhandene Animation zum Starten der Anwendung einfügen wollten (sowie die Weihnachtsmütze auf unserem Logo, aber es war eine einfache Ersetzung des Bildes, die in diesem Artikel nicht erwähnt werden sollte).

Ich wusste, dass die Animation zum Starten einer Anwendung unter iOS mit Lottie erstellt wurde , da sie nach meinem Eintritt in das Unternehmen hinzugefügt wurde (Details finden Sie im Artikel von Radek Cieciwa ). Ich sagte den Designern jedoch, dass ich versuchen würde, einfachere Lösungen für die Anzeige von Schneeflocken zu finden (ohne Lottie verwenden zu müssen) - und begann, verschiedene Ansätze zu untersuchen.

Hier ist eine Animation, die mein Kollege Radek für Badoo gemacht hat. Tadellos!



Und so fügte ich fallende Schneeflocken hinzu. Möchten Sie wissen, wie ich es gemacht habe? Die Antwort finden Sie unten.

Partikelsysteme

Beim Lesen verschiedener Dokumentationen über Animationen fiel mir ein, dass in Spielen und Filmen häufig Partikelsysteme verwendet werden, um solche Probleme zu lösen.

Wikipedia beschreibt dieses Konzept ziemlich genau:

„Das Partikelsystem ist eine in der Computergrafik verwendete Methode zur Darstellung von Objekten ohne klare geometrische Grenzen (verschiedene Wolken, Nebel, Explosionen, Dampfstrahlen, Züge von Raketen, Rauch, Schnee, Regen usw.). Partikelsysteme können sowohl in zweidimensionalen als auch in dreidimensionalen Grafiken implementiert werden. "

Ein Partikelsystem besteht aus einem oder mehreren grafischen Grundelementen wie Punkten, Linien oder Bildern, die als Partikel bezeichnet werden. Diese Partikel werden von einem Emitter erzeugt und emittiert, der Teil eines Partikelsystems ist.

Jedes Partikel verfügt über eine Reihe von Parametern, die sich direkt oder indirekt auf sein Verhalten auswirken und bestimmen, wie es gezeichnet wird. Partikel können sich gleichzeitig in großer Anzahl und in verschiedene Richtungen bewegen, um beispielsweise die Wirkung einer Flüssigkeit zu erzeugen.

Die Animation wird wirksam, wenn Partikel vom System emittiert werden. Das System emittiert Partikel an zufälligen Stellen innerhalb des angegebenen Bereichs des Partikelsystems. Es kann verschiedene Formen annehmen: Kreis, Rechteck, Kugel, Kasten, Linie, Punkt usw.

Das System bestimmt auch die Eigenschaften von Partikeln, die sich auf ihre Geometrie, Geschwindigkeit und andere Parameter auswirken. Unterschiedliche Emitter-APIs haben unterschiedliche Namen für ähnliche Eigenschaften.

Wenn Partikel gleichzeitig vom System emittiert werden, erzeugen sie atemberaubende Animationen, die wie Regen, Feuer oder Schnee aussehen können.

Von der Theorie zur Praxis

Ich dachte, dass Apple höchstwahrscheinlich Unterstützung für Partikelsysteme in einem seiner Frameworks hat. Und die Ergebnisse meiner Suche haben gezeigt, dass ich Recht habe.

Das Partikelsystem ist Teil des Core Animation Frameworks und wird in den Klassen CAEmitterLayer und CAEmitterCell ausführlich beschrieben .

Nachdem ich alle notwendigen Informationen über das Partikelsystem und die unterstützten APIs unter iOS studiert hatte, ging ich zu meinem Lieblingsteil über - der Umsetzung unserer Idee.

Leider ist Weihnachten nicht für immer, daher brauchten wir die Möglichkeit, Schneeflocken nach dem 25. Dezember aus der Ferne auszuschalten.

Wie oben erwähnt, wurde die Animation zum Starten der Anwendung mit Lottie implementiert. Das heißt, ich musste einen Weg finden, um Schneeflocken so hinzuzufügen, dass die vorhandene Animation und ihr Code nicht beeinträchtigt wurden, da meine Lösung sofort nach der Veröffentlichung gelöscht werden musste.

Ich habe einen sehr einfachen Weg gefunden, dies zu tun: Ich habe ein neues transparentes UIView hinzugefügt, um Schneeflocken vor der vorhandenen Animation und dem Hintergrund anzuzeigen, und dann das Erscheinungsbild mithilfe einer Flagge ferngesteuert.



Das Bild oben zeigt die UIView, die in der endgültigen Lösung verwendet wurden:

1. UIView mit einem Partikelsystem, das Schneeflocken emittiert.
   
2. UIViews, die in Lottie-gesteuerten Animationen zum Starten von Anwendungen verwendet werden.
   

Nachdem dieses Problem gelöst war, musste ich eine Komponente erstellen, die die Logik der Partikelemission enthielt, um animierte Schneeflocken zu erzeugen.

Für den Anfang brauchte ich Bilder von Schneeflocken, die ich als Inhalt für den Emitter verwenden konnte. Sie sollten ziemlich einfach sein, oder?

Jede Schneeflocke war entweder ein gewöhnlicher oder ein verschwommener weißer Kreis. Ich habe sie selbst in Sketch erstellt.

Einige Implementierungsdetails

CAEmitterLayer ist ein spezieller CALayer, der ein Partikelsystem erstellt, animiert und rendert. Sie können damit Ihre Geometrie, Position, den Zeichnungsmodus und vieles mehr steuern.

Ich begann mit der Entwicklung von Animationen, indem ich eine Ebene erstellte:

snowEmitterLayer.emitterShape = CAEmitterLayerEmitterShape.line snowEmitterLayer.beginTime = CACurrentMediaTime() snowEmitterLayer.timeOffset = 10.0 

Ich musste nur drei Eigenschaften ändern:

• emitterShape : Definiert die Form der Ebene. Ich habe eine Linie verwendet, mit der Schneeflocken auf dem gesamten Bildschirm angezeigt werden können.
  
• beginTime : ist Teil des CAMediaTiming-Protokolls und stellt die Startzeit der Ebenenanimation relativ zu den übergeordneten Ebenenanimationen dar.
  
• timeOffset : ist auch Teil des CAMediaTiming-Protokolls und im Wesentlichen eine Schnellvorlaufanimation für eine bestimmte Zeit relativ zu ihrem Beginn. Ich habe einen Wert von 10 Sekunden angegeben, was dazu führte, dass zu dem Zeitpunkt, als die Animation gestartet wurde, die Schneeflocken bereits den gesamten Bildschirm bedeckten, und genau das wollten wir (wenn ich den Wert auf 0 Sekunden setze, erscheinen die Schneeflocken oben und bedecken den Bildschirm ganz erst nach einiger Zeit).
  

Mit einer fertigen Schicht habe ich zwei verschiedene Emitter erstellt: schwerer für Schneeflocken und leichter für Schneeflocken.

Für schwere Schneeflocken habe ich den Emitter wie folgt eingerichtet:

 let flakeEmitterCell = CAEmitterCell() flakeEmitterCell.contents = UIImage(named: "snowflake_dot")!.cgImage flakeEmitterCell.emissionRange = .pi flakeEmitterCell.lifetime = 20.0 flakeEmitterCell.birthRate = 30 flakeEmitterCell.scale = 0.15 flakeEmitterCell.scaleRange = 0.6 flakeEmitterCell.velocity = 30.0 flakeEmitterCell.velocityRange = 20 flakeEmitterCell.spin = -0.5 flakeEmitterCell.spinRange = 1.0 flakeEmitterCell.yAcceleration = 30.0 flakeEmitterCell.xAcceleration = 5.0 

Wie Sie sehen, musste ich eine erhebliche Anzahl von Eigenschaften ändern, von denen jede sehr wichtig ist, um den gewünschten Effekt zu erzielen:

• Inhalt : CGImage zur Anzeige einer Schneeflocke (wie Sie sich erinnern, ist dies eines der Bilder, die ich selbst erstellt habe);
  
• emissionsRange : Winkel im Bogenmaß, der den Kegel definiert, in dem Partikel erscheinen (ich habe den PI-Winkel so gewählt, dass die Partikel auf dem gesamten Bildschirm sichtbar sind);
  
• Lebensdauer : Bestimmt die Lebensdauer eines Partikels.
  
• Geburtsrate : Bestimmt die Anzahl der Partikel, die pro Sekunde emittiert werden.
  
• scale and scaleRange : Beeinflusst die Partikelgröße, wobei ein Wert von 1,0 die maximale Größe ist. Das Intervall bestimmt die Größenabweichungen zwischen den erzeugten Partikeln, wodurch Partikel mit zufälligen Größen emittiert werden können.
  
• Geschwindigkeit und Geschwindigkeitsbereich : Beeinflusst die Geschwindigkeit des Auftretens von Partikeln. weicht zufällig innerhalb des in VelocityRange angegebenen Werts ab;
  
• spin und spinRange : Beeinflussen die Rotationsgeschwindigkeit, gemessen im Bogenmaß pro Sekunde, und die zufällige Abweichung innerhalb des in spinRange angegebenen Werts.
  
• yAcceleration und xAcceleration : Dies sind zwei Komponenten des Beschleunigungsvektors, der auf den Emitter angewendet wird.
  

Ich brauchte auch einen zweiten Emitter, um leichte Schneeflocken zu erzeugen. Alle Eigenschaften blieben unverändert, mit Ausnahme von zwei:

• Inhalt : hier habe ich Bilder mit einem verschwommenen Kreis verwendet;
  
• Geschwindigkeit : und hier musste ich die Fallgeschwindigkeit reduzieren, um Schneeflocken leicht zu machen.
  

 let blurryFlakeEmitterCell = CAEmitterCell() blurryFlakeEmitterCell.contents = UIImage(named: "snowflake_blurry_dot")?.cgImage blurryFlakeEmitterCell.velocity = 40 //      

Ich konnte nur die Schicht und die Emitter verbinden, was sich als sehr einfach herausstellte:

 snowEmitterLayer.emitterCells = [flakeEmitterCell, blurryFlakeEmitterCell] self.layer.addSublayer(snowEmitterLayer) 

Fazit

Ich habe schnell eine funktionierende Version mit fallenden Schneeflocken erstellt, die sehr gut aussah. Es war ziemlich einfach zu implementieren und hat den vorhandenen Code nicht geändert. Ich habe es den Designern gezeigt und sie haben es wirklich gemocht.

Partikelsystemanimationen können sehr beeindruckend und relativ einfach zu implementieren sein, wenn Sie über die richtigen Tools verfügen.

Weitere Informationen zu Partikelsystemen finden Sie in folgenden Quellen:

• Wikipedia
• Ray wenderlich
• Einheit
• Allen Martin über Partikelsysteme