In diesem Artikel erläutern wir, wie Sie Animationen zu jedem Teil Ihres Designs hinzufügen können.
Animationen sind eine effektive Möglichkeit, Werbeaktionen, Ankündigungen und Nachrichten anzuzeigen. Sie ziehen das menschliche Auge durch Bewegung an und veranlassen Menschen dazu, natürlich zur Quelle zu schauen. Mit Designer ist es einfach, Animationen zu Ihren Designs hinzuzufügen, um mehr Aufmerksamkeit von Besuchern zu erhalten.
Eine Einführung in die Verwendung von Designer finden Sie in unserem Artikel Erste Schritte mit Designer.
So fügen Sie Animationen zu Design-Elementen hinzu
Durch Auswahl der Schaltfläche Animieren können Sie Animationen zu Ihren Design-Elementen hinzufügen.
Diese Schaltfläche ist auch pro Element verfügbar.
Ein Klick darauf öffnet den Bereich Animieren im Seitenmenü:
Um eine Animation hinzuzufügen, müssen Sie ein zu animierendes Element auswählen. Entscheiden Sie dann, ob Sie eine Seiten-Animation oder eine Objekt-Animation verwenden möchten.
Um die Unterschiede zwischen den beiden zu demonstrieren und zu zeigen, wie man sie am besten verwendet (zusammen oder getrennt), verwenden wir ein einfaches Vorlagen-Design, wie unten gezeigt:
Seiten-Animationen
Seiten-Animationen werden in der Reihenfolge animiert, in der sie in der Liste platziert sind. Diese animieren auch nur einmal, wenn die Seite geladen wird.
Nehmen wir zum Beispiel an, wir möchten, dass das Wasser in unserer Beispielvorlage von rechts hereinfliegt - um den Eindruck zu erwecken, dass die Wasserflaschen bespritzt werden.
Wählen Sie zuerst das Element aus. Klicken Sie dann auf Animieren → Hinzufügen unter dem Abschnitt Seiten-Animationen. Dies öffnet eine Vielzahl von Optionen:
Animationstypen:
- Einblenden
- Ausblenden
- Von links hereinfliegen
- Von rechts hereinfliegen
- Von unten hereinfliegen
- Von oben hereinfliegen
- Nach links hinausfliegen
- Nach rechts hinausfliegen
- Nach unten hinausfliegen
- Nach oben hinausfliegen
- Hineinzoomen - Zoomt das Element kurz hinein
- Herauszoomen - Zoomt das Element kurz heraus
- Sprung X - Lässt das Element horizontal springen
- Sprung Y - Lässt das Element vertikal springen
- Aufblitzen
- Zoom - Wechselt zwischen Hinein- und Herauszoomen des Elements
- Nach links drehen
- Nach rechts drehen
Obwohl wir detaillierte Beschreibungen für jede dieser Optionen liefern könnten, macht es mehr Spaß, mit ihnen herumzuspielen und zu sehen, wie sie zu Ihrer Vision passen!
Animations-Timing:
- Nach vorheriger - Legt fest, dass die Animation nach der vorherigen Animation in der Liste ausgelöst wird.
- Mit vorheriger - Legt fest, dass die Animation gleichzeitig mit der vorherigen Animation ausgelöst wird.
- Von Anfang an - Legt fest, dass die Animation ausgelöst wird, sobald das Asset geladen wird.
Verzögerung (Sek.) - Wie lange die Verzögerung zwischen dem Laden des Assets/der vorherigen Animation und der Auslösung der Animation ist.
Animationsgeschwindigkeit - Ändert, wie schnell sich die Animation bewegt.
| HINWEIS |
|
Um das Animations-Timing richtig zu nutzen, müssen Sie Ihre Auswahl mit der Verzögerungsoption koordinieren. Nehmen wir zum Beispiel an, wir haben drei Seiten-Animationen, A, B und C.
|
Sobald eine Animation hinzugefügt wurde, können weitere erstellt werden. Die Liste der Animationen kann per Drag & Drop neu angeordnet werden:
| HINWEIS |
| Die Reihenfolge, in der die Animationen gezogen werden, überschreibt nicht ihr Timing zur Anzeige. Wenn Sie beispielsweise drei Animationen haben und eine auf "Von Anfang an" eingestellt ist und Sie sie ans Ende der Reihenfolge ziehen, wird sie trotzdem von Anfang an angezeigt, obwohl sie die letzte in der Reihenfolge ist. Das Ändern der Reihenfolge im Drag-and-Drop ändert nicht die Einstellung des Animations-Timings. |
Um die gewünschte Animation zu erstellen, wählen wir einfach die verschiedenen Wasserelemente aus und lassen sie Von rechts hereinfliegen, eingestellt auf Von Anfang an, sodass das gesamte Wasser gleichzeitig hereinkommt. Wir können dies testen, indem wir auf Abspielen klicken:
Objekt-Animationen
Objekt-Animationen werden gleichzeitig animiert, unabhängig von der Reihenfolge, in der sie platziert sind. Diese können auch so eingestellt werden, dass sie unbegrenzt animiert werden (oder so lange, wie das Asset auf dem Bildschirm angezeigt wird).
Nehmen wir zum Beispiel an, unser Bildschirm soll ziemlich lange angezeigt werden (über eine Minute). Dafür möchten wir zusätzliche Animationen einbauen, um sicherzustellen, dass es nicht stagniert und weiterhin die Aufmerksamkeit der Menschen auf sich zieht.
Dazu lenken wir die Aufmerksamkeit auf das Hydration-Textelement, indem wir eine Objekt-Animation erstellen.
Die Registerkarte Objekt-Animationen ähnelt der Registerkarte Seiten-Animationen, mit einigen wichtigen Unterschieden:
Animations-Timing
- Verzögerung - bezieht sich auf die Verzögerung zwischen jeder Animation. Dies gilt am Anfang und bei jeder nachfolgenden Animation
- End-Verzögerung - Bezieht sich auf die Verzögerung innerhalb jeder Animation.
Schleife
- Unbegrenzt - Wiederholt die Animation kontinuierlich, bis das Asset geändert wird.
- Einmal - Spielt die Animation beim Laden einmal ab.
- Iterationen - Ermöglicht es Ihnen anzugeben, wie oft die Animation wiederholt werden soll.
| HINWEIS für Legacy Designer 1.0-Benutzer |
| Mit dem jüngsten Designer 2.0-Update haben wir mehrere Objekt-Animationen auf einem einzelnen Element veraltet gemacht. Wenn Sie 2-3 Objekt-Animationen in einem 1.0-Design haben, kann es weiterhin in 2.0 bearbeitet werden. Wenn sie jedoch gelöscht werden, müssen sie in 1.0 wieder hinzugefügt werden. Sobald Designer 1.0 veraltet ist, können Sie diese Animationen nur noch bearbeiten oder löschen. |
Nehmen wir an, wir möchten, dass der Hydration-Text von Seite zu Seite springt, aber nicht zu schnell, um ablenkend oder störend zu sein.
Wir setzen die Verzögerung auf 3 Sekunden und dann die End-Verzögerung ebenfalls auf 3 Sekunden. Dies bewirkt, dass der Sprung für diese Zeit anhält. Zuletzt setzen wir die Schleife auf Unbegrenzt:
Wenn wir jetzt alle unsere Animationen zusammenfügen, erhalten wir dank unserer Seiten-Animationen einen schönen schnellen Satz von Animationen am Anfang, gefolgt von einer schönen Schleife danach dank unserer Objekt-Animation. Dies kann mit Alle abspielen oder Vorschau getestet werden:
| HINWEIS |
|
Die Formel für jede Objekt-Animations-Iteration lautet wie folgt: Verzögerung + Animationsdauer + End-Verzögerung = 1 Iteration. |
Häufige Probleme mit Animationen
Lassen Sie uns nun einige häufige Probleme durchgehen, auf die Sie beim Versuch stoßen könnten, Ihre Animationen auf einem Bildschirm anzuzeigen.
Vorabladen von Assets in Wiedergabeliste
Diese Funktion ermöglicht ein nahtloseres Erscheinungsbild, indem Assets vor der Anzeige auf dem Bildschirm geladen werden. Dies verringert die Wahrscheinlichkeit, dass Ihre Beschilderung für ein oder zwei Sekunden hängt, während die Assets geladen werden.
OptiSigns lädt Ihre Assets 6-8 Sekunden vor der Anzeige auf dem Bildschirm vor. Dies hat den unglücklichen Effekt, dass Ihre Animation möglicherweise übersprungen wird, da sie sofort beim Laden angezeigt wird. Um dies zu beheben, können Sie entweder:
- (Empfohlen) Fügen Sie eine Verzögerung von 1-3 Sekunden zu Ihren Animationen hinzu, um sicherzustellen, dass sie auf dem Bildschirm erscheinen, wenn dieses Vorladen aktiviert ist:
- Deaktivieren Sie das Vorabladen von Assets in der Wiedergabeliste. Dies führt jedoch dazu, dass zwischen den Übergängen ein leerer Bildschirm angezeigt wird.
Geräteleistung
Das gleichzeitige Ausführen zu vieler Animationen beeinträchtigt die Leistung Ihres Geräts und führt zu einer weniger als idealen Digital Signage-Erfahrung.
Im Allgemeinen hängt das Ausmaß davon ab, wie leistungsfähig Ihr Gerät ist. Ein Roku-Gerät, ein typischer Smart-TV, Amazon FireStick oder ein anderes Gerät, das nicht speziell für Digital Signage entwickelt wurde, wird wahrscheinlich unter größeren Problemen leiden. Bei Verwendung eines dieser Geräte empfehlen wir nicht mehr als 1 oder 2 Animationen pro erstelltem Asset.
Im Gegensatz dazu können Windows- und Linux-Geräte oder OptiSigns-Player deutlich höhere Lasten bewältigen. Wenn Sie jedoch Ruckeln bei der Verwendung eines dieser Geräte feststellen, empfehlen wir, Animationen auf 3-4 Animationen pro erstelltem Asset zu beschränken.
Das ist alles!
OptiSigns ist der führende Anbieter von Digital Signage-Software. Wenn Sie zusätzliche Fragen, Bedenken oder Feedback zu OptiSigns haben, wenden Sie sich gerne an unser Support-Team unter support@optisigns.com.