Accentsconagua
Share
Die Material Design-Sprache wurde entwickelt, um Probleme mit dem flachen Design auf kleineren Bildschirmen zu lösen, indem interaktive Elemente mit visuellen Hinweisen versehen werden. In diesem Artikel erfahren Sie einige der grundlegenden Konzepte der Animation und wie sie verwendet werden können, um Elementen ein natürliches, lebensechtes Gefühl zu verleihen. Sie werden sehen, wie Sie diese Ideen nutzen können, um Ihre Benutzer zu begeistern und ihnen zu helfen, die Benutzeroberfläche Ihrer App zu verstehen.
Google schlägt vor, dass alle Animationen reaktionsschnell, natürlich, bewusst und beabsichtigt sein sollten. Objekte auf dem Bildschirm sollten so aussehen, als wären sie aus bestimmten Materialien gefertigt, mit ihrem eigenen Gewicht und Volumen, die bestimmen, wie sie sich auf dem Bildschirm bewegen und wie sie agieren.
Animationen, die auftreten, sollten direkt mit einer Aktion korreliert sein und sich zweckmäßig und lebendig fühlen. Sie sollten aussagekräftig sein und den Benutzer durch Ihre Anwendung führen, indem er einen Zweck hat und diesem Zweck dient. Animationen sollten einen Kontext für Ihre Benutzer schaffen und dabei helfen, ihren Blick auf den Bildschirm zu lenken, damit sie wissen, was mit Ihrer App möglich ist.
Bewegung sollte sich mehr mit der Zeit befassen, die erforderlich ist, um von Punkt A zu Punkt B zu gelangen, als mit der Entfernung, die zurückgelegt werden muss. Die Entfernungen ändern sich je nach Größe des Bildschirms. Die Geschwindigkeit eines Objekts wird jedoch hervorgehoben und ermöglicht dem Benutzer zu verstehen, was passiert.
Wenn ein Objekt entfernt und ein anderes zum Bildschirm hinzugefügt werden muss (z. B. eine Schaltfläche, die von Wiedergabe zu Pause wechselt), sollten Sie das erste Objekt in das zweite umwandeln. Ebenso können Sie eine signifikante Änderung in einem Objekt signalisieren, indem Sie Farbe und Alpha für das Bildschirmelement ändern. Auf diese Weise wissen die Benutzer, was sich geändert hat, und Sie können hervorheben, was in Ihren Apps für die Benutzer zur Verfügung steht.
Eine der besten Referenzen zum Verständnis natürlicher Animationen ist das Buch Die Illusion des Lebens von Frank Thomas und Ollie Johnston, das ein Kapitel enthält, das die Prinzipien der Animation beschreibt, die Disney in ihren Animationsfilmen verwendet. Thomas und Johnston umreißen 12 grundlegende Prinzipien in ihrem Buch. In diesem Abschnitt werden wir einige dieser Prinzipien besprechen und wie sie mit Material Design in Verbindung gebracht werden können.
Wenn ein Objekt eine Aktion durchläuft, zeigt es Änderungen in seiner Form basierend auf dem Material, aus dem es besteht.
Dieses Konzept wird durch das Squash- und Stretch-Prinzip dargestellt, das am besten durch einen Springball dargestellt werden kann. Wenn äußere Kräfte auf den Ball wirken, z. B. die Schwerkraft oder die Beschleunigung nach oben, dehnt sich der Ball aus. Wenn das Objekt den Boden berührt, wird es auf die Oberfläche aufprallen und quetschen. Objekte, die sich in Ihrer App bewegen und mit Oberflächen interagieren, sollten diese Idee verwenden, um Ihrem Objekt bei Bewegung die Illusion von Gewicht und Volumen zu vermitteln.
Keine großen Aktionen sollten aus heiterem Himmel passieren. Wenn Sie in Ihren Apps eine Animation ausführen, sollten Sie eine andere, kleinere Aktion haben, die zur Hauptanimation führt. Dieses Prinzip wird als Antizipation bezeichnet und trägt dazu bei, die Situation zu verhindern, in der Ihr Benutzer fragt: "Warum ist das passiert?" Natürliche Bewegungen fangen im Allgemeinen eher mit einem Aufwärmen an als mit einem einfachen Start. In Android können Sie das verwenden AnticipateInterpolator Klasse, um eine Animation zu erstellen, die zuerst eine kleine Entfernung zurücklegt, bevor sie sich vorwärts bewegt.
Das Staging dient dazu, Ihre Inhalte für Ihre Benutzer klar und verständlich zu machen. Ihre Benutzeroberfläche und Animationen sollten sich natürlich und an eine Kernaufgabe oder ein Konzept angelehnt anfühlen, anstatt Ihren Benutzer unsicher zu machen, warum etwas auf eine bestimmte Weise passiert ist. Sie sollten immer nur eine Hauptaktion ausführen, um die Dinge einfach und bewusst zu gestalten.
Wenn ein sich bewegendes Objekt zum Stillstand kommt, bleibt es nicht alle auf einmal stehen (es trifft nicht auf ein festes Objekt, aber da kommen Stretch und Squash ins Spiel). Anhänge eines Objekts bewegen sich noch kurze Zeit, nachdem der Kern des Objekts angehalten wurde.
Beim Erstellen von Materialanimationen sollten Sie versuchen, zwei verschiedene Positionen zu verwenden: den gewünschten Haltepunkt und einen etwas weiter entfernten, an dem Ihre Animation vollständig anhalten und dann an Ihre endgültige Position zurückkehren kann. Dies verhindert, dass Ihre Animation flach und mechanisch erscheint. Diese Art der Animation kann mit der BounceInterpolator oder ÜberschreitungInterpolator Klassen.
Natürliche Bewegungen erfolgen nicht mit einer gleichmäßigen Geschwindigkeit und auch Ihre Animationen sollten es nicht sein.
Wenn sich ein Objekt außerhalb des Sichtfelds bewegt und in den Bildschirm eintritt, sollte dies schnell geschehen und dann verlangsamt werden, wenn es seine endgültige Position erreicht. Die schnelle Bewegung wird die Aufmerksamkeit Ihres Benutzers auf sich ziehen und Ihnen ausreichend Zeit geben, um zu erkennen, wo sie endet.
Umgekehrt sollte ein Objekt, das den Bildschirm verlässt, langsam beginnen und schneller werden, wenn es den Bildschirm verlässt. Dies gibt Ihrem Benutzer genügend Zeit, um zu bemerken, dass sich das Objekt bewegt, und wenn es schneller abläuft, wird er verstehen, dass er aufhören muss, sich um das Objekt auf dem Bildschirm zu kümmern.
Wenn sich ein Objekt von einer Position auf dem Bildschirm an eine andere bewegt, ohne den Bildschirm zu irgendeinem Zeitpunkt zu verlassen, sollten Sie diese beiden Ideen kombinieren, damit der Benutzer sieht, was passiert, während Ihre Animation ein natürliches Gefühl erhält. Dieses Prinzip wird auch auf Listen angewendet, da diese beim Scrollen durch einen Benutzer schnell durchlaufen und dann verlangsamt werden, bis sie aufhören. Wenn eine Liste zwischen den Abschnitten springt, wird sie weniger eindringlich und fühlt sich mechanisch an. Du kannst den ... benutzen LinearOutSlowInInterpolator, FastOutLinearInInterpolator, oder FastOutSlowInInterpolator um diese Animationseffekte hinzuzufügen.
Mit wenigen Ausnahmen treten natürliche Bewegungen in Bögen und nicht in geraden Linien auf. Wenn Sie Objekte über den Bildschirm bewegen, sollten Sie zusätzlich zum Slow-In-Out-Prinzip versuchen, das Objekt in einem Bogenpfad zu verschieben, um ein mechanisches, unnatürliches Gefühl in Ihrer Animation zu vermeiden. Sie können das Android verwenden ArcMotion Objekt, um Ihre Objekte auf einem gekrümmten Pfad zu verschieben.
Sekundäre Aktionen sind kleinere, einfachere Aktionen, die die Idee der wichtigsten Aktion unterstützen. Sekundäre Aktionen sollten nicht überschatten oder interessanter erscheinen als die Hauptaktion, da sie lediglich zur Betonung vorhanden sind.
Ein Beispiel für eine sekundäre Aktion wäre das Öffnen der Navigationsleiste in einer Android-Anwendung. Während das Öffnen der Schublade die Hauptaktion ist, ist die Hamburger-Symbol-zu-Pfeil-Animation ein einfacher Effekt, der das Geschehene hervorhebt, ohne die Hauptänderung auf dem Bildschirm zu überschatten.
Wenn Sie mit Animationen arbeiten, ist das Timing alles. Wenn sich eine Animation zu langsam oder zu schnell bewegt, wird der Benutzer feststellen, dass sich etwas "ab" fühlt..
Es ist wichtig zu wissen, dass Material Design verlangt, dass Objekte so aussehen, als wären sie aus einem Material. Wenn sich ein Objekt anfühlt, als würde Papier auf einer Oberfläche rutschen, sollte es nicht schnell über den Bildschirm bewegt werden. Verständlicherweise gibt es keine sichere Formel für die Animationsgeschwindigkeit in Apps, aber mit etwas Zeit und Übung sollten Sie in der Lage sein, zeitlich gut angepasste Animationen zu erstellen, die zum Thema und Zweck Ihrer App passen.
Nachdem Sie sich mit den Hauptkonzepten von Material Motion und einigen grundlegenden Prinzipien der Animation vertraut gemacht haben, können Sie mit den verschiedenen verfügbaren Tools herumspielen, um Ihre App zu animieren und den kleinen zusätzlichen Pop hinzuzufügen, der Ihre Benutzer begeistert.
Wenn Sie mehr über das Erstellen von Animationen in Android erfahren möchten, lesen Sie den ausführlichen Kurs Animate Your Android App von Ashraff Hathibelagal, hier auf Envato Tuts+.
Oder sehen Sie sich einige unserer anderen Tutorials zur Animation in Android an!
