Verbessern Sie Ihre Apps mit einfachen Animationen: Teil 2

In Teil 1 dieses Tutorials haben wir gelernt, wie Sie mithilfe der Animation Elemente unserer Benutzeroberfläche ein- und ausblenden. Durch schrittweise Änderung des Werts der Alpha-Eigenschaft einer Ansicht haben wir das Standardverhalten von UIKit verbessert, wodurch eine App eleganter und professioneller erscheint. Hier in Teil 2 erfahren Sie, wie Sie mithilfe von Animationen einfache Bewegungen erstellen und einen sehr häufigen visuellen iPhone-Effekt erstellen.

Die Techniken, die wir heute verwenden, erfordern etwas mehr Erklärungen. Anstatt ein Projekt von Grund auf neu zu erstellen, beginnen wir mit diesem Beispielprojekt, das Sie herunterladen können, um Zeit zu sparen.

Einfache Animation

Nachdem Sie das Animationsprojekt heruntergeladen haben, öffnen Sie es in Xcode und klicken Sie auf ViewController.xib. Wie in Abbildung A dargestellt, enthält die Hauptansicht eine mit dem myView-Ausgang verbundene Unteransicht, die wiederum ein mit dem myLabel-Ausgang verbundenes UILabel enthält. Wir haben auch eine Schaltfläche, die die move: -Methode in unserer ViewController-Klasse auslöst.

Abbildung A.

Klicken Sie im Bereich "Dateien und Gruppen" auf "ViewController.m" und fügen Sie viewDidLoad die folgende Zeile hinzu:

 - (void) viewDidLoad 
 { 
 super viewDidLoad; 
 self.nextMove = 0; 
 }} 

Fügen Sie dann die folgende Methode direkt unter viewDidLoad hinzu: (Möglicherweise haben Sie die Warnung von Xcode vor einer "unvollständigen Implementierung" bemerkt. Diese wird ausgeblendet, sobald Sie diese Methode eingerichtet haben.)

 - (IBAction) move: (id) Absender 
 { 
 CGPoint newPoint; 
 switch (self.nextMove) { 
 Fall 0: { 
 // 1 
 newPoint = CGPointMake (0, 0); 
 // 2 
 UIView animateWithDuration: 1.5 
 Verzögerung: 0.0 
 // 3 
 Optionen: UIViewAnimationOptionCurveEaseInOut 
 Animationen: ^ { 
 // 4 
 CGRect frame = self.myView.frame; 
 frame.origin = newPoint; 
 self.myView.frame = frame; 
 }} 
 Abschluss: nil;} 
 brechen; 
 Fall 1: { 
 // 5 
 newPoint = CGPointMake (300.600); 
 // 6 
 UIView animateWithDuration: .5 
 Animationen: ^ { 
 CGRect frame = self.myView.frame; 
 frame.origin = newPoint; 
 self.myView.frame = frame; 
 // 7 
 self.myView.transform = CGAffineTransformMakeScale (0.0, 0.0); 
 }} 
 Abschluss: nil;} 
 brechen; 
 Standard: 
 brechen; 
 }} 
 self.nextMove ++; 
 }} 

Erstellen Sie die Anwendung und führen Sie sie aus. Wenn Sie zum ersten Mal auf Go drücken, wird das Etikett und die darin enthaltene Ansicht in einer reibungslosen, einfachen Bewegung in die obere linke Ecke des Bildschirms verschoben. Drücken Sie erneut auf Los, und sie werden kleiner und verschwinden in der unteren rechten Ecke des Bildschirms. Sie haben diesen Effekt in vielen Apples von Apple gesehen, und obwohl Apple normalerweise viel mehr Schwung hinzufügt, ist die Technik im Grunde dieselbe. Lassen Sie uns verstehen, wie es gemacht wird.

Wie es gemacht wird

Wir brauchen eine Möglichkeit, die Aktion zu steuern, und zwar so, dass die move: -Methode eine switch-Anweisung enthält, die bestimmt, welche Animation bei jedem Drücken der Taste ausgeführt wird. Der aktuelle Wert der Instanzvariablen self.nextMove bestimmt, welcher Codeblock ausgeführt werden soll. Wenn Go zum ersten Mal gedrückt wird, ist self.nextMove = 0 und der Codeblock in Fall 0: wird ausgeführt. self.nextMove wird dann inkrementiert, so dass beim nächsten Drücken von Go der Codeblock in Fall 1: ausgeführt wird.

Der für uns interessantere Code befindet sich in den beiden Codeblöcken selbst. In Kommentar 1 erstellen wir eine neue CGPoint-Variable mit dem Namen newPoint, die die obere linke Ecke des Bildschirms darstellt. Dies ist die Position x = 0, y = 0 im UIKit-Koordinatensystem. In Abbildung B entsteht das Koordinatensystem in der oberen linken Ecke, und die Werte sowohl der x- als auch der y-Achse nehmen zu, wenn wir uns nach rechts und unten bewegen. Zum Beispiel wäre die untere rechte Ecke auf dem iPhone 5 der Punkt x = 639, y = 1135. Mit CGPoint-Variablen können wir den x- und y-Wert einer bestimmten Position in einer einzigen Struktur darstellen.

Abbildung B.

In Kommentar 2 haben wir einen Animationsblock eingerichtet, der dem in Teil 1 ähnelt, jedoch mit einer leichten Wendung. Dieses Mal geben wir eine Animationsoption namens UIViewAnimationOptionCurveEaseInOut an. Diese Option teilt Core Animation mit, dass die Animation zunächst langsam gestartet und dann auf Höchstgeschwindigkeit erhöht und schließlich kurz vor dem Ende verlangsamt werden soll. Dieser Effekt verleiht der Animation ein ansprechenderes und natürlicheres Aussehen. Möglicherweise möchten Sie mit anderen Optionen wie UIViewAnimationOptionCurveEaseIn, UIViewAnimationOptionCurveEaseOut und UIViewAnimationOptionCurveLinear experimentieren, um die anderen verfügbaren Effekte anzuzeigen.

In den drei Zeilen in Kommentar 4 ändern wir den Wert des Ursprungs von myView, dh die Position der oberen linken Ecke in der Hauptansicht. Wir werden den Ursprungswert von seinem aktuellen Wert von x = 60, y = 278 (wie in der .xib-Datei festgelegt) in der oberen linken Ecke des Bildschirms animieren, indem wir ihm den Wert von newPoint oder x = 0 zuweisen, y = 0. Wir weisen eine Dauer von 1, 5 Sekunden zu, damit sich der Wert allmählich genug ändert, damit wir die Animation genießen können. Der von UIViewAnimationOptionCurveEaseInOut erstellte visuelle Effekt basiert ebenfalls auf diesem Timing.

In Kommentar 5 haben wir newPoint so eingerichtet, dass es eine Position im unteren rechten Bereich des Bildschirms darstellt, sodass sich der Ursprung von myView während der zweiten Animation nach unten und rechts bewegt. Dann richten wir in Kommentar 6 die Animation des Ursprungs wie zuvor ein und wenden eine Skalentransformation auf das Koordinatensystem von myView an, wie in Kommentar 7 gezeigt. Durch Anwenden einer Skalentransformation auf myView verkleinern wir das Koordinatensystem im Wesentlichen auf das Punkt, an dem es unsichtbar wird. Transformationen sind ein tiefes Thema für einen anderen Tag, aber im Moment wissen Sie nur, dass dies eine sehr einfache Möglichkeit ist, eine Ansicht zu erstellen, und dass alles, was darin enthalten ist, zu schrumpfen und zu verschwinden scheint. Es ist eigentlich immer noch ein lebendes Objekt in der Hauptansicht, aber für alle praktischen Zwecke unsichtbar.

Während die Animation ausgeführt wird, bewegt sich der Ursprung von myView allmählich nach rechts und unten, und gleichzeitig wird das Koordinatensystem verkleinert. Nach Abschluss der Animation wird die Ansicht praktisch unsichtbar. Wenn Sie eine echte App schreiben, möchten Sie wahrscheinlich sicherstellen, dass die Ansicht nach Abschluss der Animation entsorgt wird, es sei denn, Sie möchten sie auf irgendeine Weise wiederverwenden.

Sie haben jetzt einige grundlegende Techniken, die Sie anwenden können, um Ihren Anwendungen ein "Wow" hinzuzufügen. Experimentieren Sie unbedingt mit diesen Animationen auf realen Geräten, da die Leistung auf realer Hardware oft überraschend anders ist als auf dem Simulator.

Lesen Sie auch:

  • Verbessern Sie Ihre iOS-Apps mit einfachen Animationen: Teil 1
  • Best Practices: Entwickeln Sie heterogene iOS-Apps
  • Generieren Sie automatisch Symbole für iOS-Apps

© Copyright 2021 | mobilegn.com