Durch das Studium der vorherigen drei Lektionen beherrschen wir die Methode zur Erstellung von Animationen, auch wenn die erstellten Animationen noch sehr grob sind. Erinnern Sie sich noch daran, dass Sie beim Erlernen der Grundlagen lange Zeit einem einzigen Farbblock ausgesetzt waren? Das hat sich nicht auf das aktuelle Leistungsniveau aller Menschen ausgewirkt. Ebenso werden wir bald mit der Erstellung detaillierterer Animationen beginnen. Aber bevor das alles kommt, muss jeder das nötige Design Thinking erlernen. Unter dem sogenannten Design Thinking versteht man die Planung und Überlegungen vor der Erstellung von Animationen. Diese Planung umfasst viele Aspekte.
Lassen Sie uns zunächst über die Organisation der Ebenen sprechen. Die endgültige fertige Animation enthält keine Ebeneninformationen. Die hier genannten Schichten beziehen sich nur auf die in Produktion befindlichen Schichten. Bei Animationen, die mithilfe von Ebenenpositionsänderungen erstellt wurden, besteht ein offensichtliches Problem darin, dass die Ebenen angemessen angeordnet sein müssen , da die kleinste Bewegungseinheit die Ebene ist. Wenn Sie also mehrere Objekte mit unterschiedlichen Bewegungstrajektorien erstellen müssen, müssen diese unterschiedlich verteilt werden Schichten. Sie müssen auch die Bewegungsentfernung im Voraus berücksichtigen. Die Größe und Platzierung des Bildes muss ausreichend Platz für Bewegungen lassen.
Die zweite besteht darin, zu überlegen, ob es sich mit anderen Ebenen überschneidet und wie mit der Überschneidung umgegangen wird, wer wen abdeckt, d. h. die hierarchische Anordnung der Ebenen. Die beiden ganz links sind aufgeführt Wenn beide Schichten 100 % haben, deckt Grün Rot ab. Die anderen beiden zeigen die unterschiedlichen Deckungseffekte verschiedener Ebenen bei 50 % Deckkraft. Wenn Grün Rot überdeckt, ist der Schnittpunkt grüner und umgekehrt. Dies geschieht alles im normalen Mischmodus. Wenn Sie andere Mischmodi wie Überlagerung wählen, müssen Sie der Ebene mehr Aufmerksamkeit schenken.
Bei den oben genannten handelt es sich ausschließlich um technische Probleme. Lassen Sie uns nun über Handlungsprobleme sprechen. Wenn sich ein Objekt im Bild ständig bewegt, besteht im Allgemeinen keine Notwendigkeit, dies zu berücksichtigen. Wenn das Objekt jedoch ursprünglich nicht im Bild war, aber später in das Bild eintrat, oder ursprünglich im Bild war und später aus dem Bild entfernt wurde, müssen Sie das Erscheinen und Verschwinden des Objekts erklären. Diese Erklärung ist ein Übergang, der das ermöglicht dem Betrachter eine natürlichere psychologische Veränderung. Eine gängige Technik besteht darin, Objekte allmählich erscheinen zu lassen (auch Einblenden genannt) oder allmählich verschwinden zu lassen (auch Ausblenden genannt). Wie in der folgenden Abbildung dargestellt, wird der Vergleich der Auswirkungen des Ein- und Ausblendens in derselben Textbewegung veranschaulicht.
Sie können die Maus in den Wiedergabebereich bewegen, um den tatsächlichen Animationseffekt zu sehen, und die Maus aus dem Wiedergabebereich bewegen, um die Wiedergabe zu stoppen. Durch den Vergleich glaube ich, dass jeder das Gefühl haben wird, dass die Wirkung der Einblend- und Ausblendverarbeitung besser ist.
Darüber hinaus ist die Schleifeneinstellung auch ein Handlungsproblem. Wir haben dies bereits erwähnt, das heißt, in einigen Situationen kann eine Endlosschleifenanimation verwendet werden, während sie in anderen Situationen nicht geeignet ist. Wenn beispielsweise die Animation eines eingeblendeten Spaltentiteltexts ständig wiederholt wird, wirkt die gesamte Webseite unordentlich und die Betrachter fühlen sich unwohl. Der derzeit am besten geeignete Ansatz besteht darin, ihn einmal abzuspielen, damit der Effekt angezeigt werden kann, ohne die gesamte Webseite zu beeinträchtigen. Ein auf 2 bis 3 Mal eingestellter Zyklus ist im Allgemeinen akzeptabel, mehr ist nicht gut.
Animationen, die nur einmal abgespielt werden, platzieren Sie jedoch am besten oben auf der Webseite, damit sie sofort gesehen werden können, wenn Sie die Webseite betreten. Wenn sie unten auf der Webseite platziert wird, ist die Wiedergabe der Animation möglicherweise bereits zu Ende, wenn der Betrachter diesen Punkt erreicht. In diesem Fall wäre es sinnlos, Animationen zu erstellen und es wäre besser, stattdessen statische Bilder zu verwenden.
Zu beachten ist, dass bei jedem Aufruf das animierte GIF-Bild erneut abgespielt wird. Wenn einige Leute bereits über Kenntnisse in der Webseitenerstellung verfügen, können sie diese Eigenschaft verwenden, um entsprechende Aktionen in der Webseitenerstellungssoftware festzulegen. So bewegen Sie hier beispielsweise die Maus, um die Animation des Beispiels anzusehen. Die Animation beginnt nach jedem Zug immer von vorne. Selbst wenn die Animation nur einmal abgespielt wird, kann sie auf diese Weise mehrmals auf der Webseite abgespielt werden. Machen Sie sich keine Sorgen, wenn Sie keine Kenntnisse über die Erstellung von Webseiten haben. Dies hat keinen Einfluss auf unser späteres Animationslernen. .
Ein wichtiger Punkt, den es im Hinblick auf gut aussehende Fade-Effekte zu berücksichtigen gilt, ist, dass Browser so eingestellt werden können, dass Animationen deaktiviert werden. Zu diesem Zeitpunkt zeigt die Animation nur das erste Bild der Animation an. Dann ist eine Animation, die dem „leise Kommen und Gehen“ oben ähnelt, auf der Webseite leer, da der erste Frame ursprünglich leer ist. Dies kann leicht zu Missverständnissen beim Zuschauer führen.
Vielleicht denken Sie, dass niemand die Animationsanzeige absichtlich ausschaltet, aber da dieser Faktor nicht ausgeschlossen werden kann, müssen wir die Situation des Besuchers auf einer breiteren Ebene betrachten. Vermeiden Sie im Gesamtlayout der Webseite die Verwendung von Einblendanimationen in wichtigen Text- oder Anzeigeteilen. Nachdem Sie die Animation auf der Webseite platziert haben, schalten Sie die Animationswiedergabe am besten manuell aus, um zu prüfen, ob ein Problem vorliegt. Wenn der Besucher beim Anzeigen der Seite die ESC-Taste drückt, wird nicht nur die Animationswiedergabe ausgeschaltet, sondern auch die Animationswiedergabe unterbrochen und der Bildschirm bleibt im Moment der Unterbrechung stehen.
Wenn Sie sich um Besucher kümmern möchten, denen das Abspielen von Animationen verboten ist, und solche, denen das gleichzeitige Abspielen von Animationen gestattet ist, und eine Balance zwischen beiden finden möchten, sollten Sie bei der Produktion von Animationen einem Grundsatz folgen, nämlich: Der Hauptteil sollte sich nicht bewegen und die geänderten Teile sollten animiert sein. Wie im Bild unten gezeigt, ist der Text selbst nicht animiert, sondern nur die Ränder des Textes. Selbst wenn die Standanimation während der Wiedergabe abgespielt oder unterbrochen wird, hat dies auf diese Weise keinen Einfluss auf das Verständnis des Betrachters für den Inhalt.
Solange jedoch der Inhalt jederzeit genau wiedergegeben werden kann und das Verschwinden des Textes oder eine übermäßige Verformung vermieden wird, kann der Haupttext auch verschoben werden.
Der in dieser Lektion beschriebene Inhalt bezieht sich nicht auf die Technologie der Animationsproduktion. Wenn Sie jedoch Animationen auf Webseiten anwenden möchten, müssen Sie die Produktions- und Leistungsmethoden der Animation aus einer breiten Perspektive betrachten. Das bloße Erlernen dieser Inhalte ist etwas langweilig. Hinterlassen Sie einfach einen Eindruck bei allen und wenden Sie ihn in zukünftigen Produktionen an.
Diese Aufgabe besteht darin, die Animation von „Quietly Come and Go“ zu erstellen. Darüber hinaus werden auch die folgenden zwei abgeleiteten Animationen erstellt.
Im nächsten Abschnitt stellen wir vor, wie man Ein- und Ausblendungen in Animationen ausdrückt.