Zero Block: Schritt-für-Schritt-Animation

Es gibt zwei Animationsmodi in Zero Block:

1) Basisanimation ist eine einfache Animation. Dies sind vorgefertigte, am häufigsten verwendete Effekte, wie der Erscheinungseffekt (durch Deckkraft, von unten nach oben, von rechts nach links, usw.), Parallaxe und Fixierung. In 90 % der Fälle reichen diese Effekte aus.

Anleitung zur Basisanimation →

2) Mit der Schritt-für-Schritt-Animation können Sie Ihre kreativen Ideen verwirklichen - und zwar so, wie Sie es möchten.

Sehen Sie sich verschiedene Beispiele dafür an, was Sie mit der Schritt-für-Schritt-Animation erreichen können.

Das Schritt-für-Schritt-Animationstool ist in Zero Block verfügbar, einem Webeditor für professionelle Designer. Fügen Sie der Seite ein Zero Block hinzu, indem Sie es in der Blockbibliothek (direkt unter der Kategorie "Andere") auswählen, oder klicken Sie unten auf der Seite auf Zero Block .

Klicken Sie auf Block bearbeiten in der oberen linken Ecke von Zero Block , um ihn anzupassen.

Fügen Sie ein neues Element hinzu, wählen Sie es aus, öffnen Sie das Einstellungsfeld, scrollen Sie nach unten zum Abschnitt "Schritt-für-Schritt-Animation", und klicken Sie auf Hinzufügen.

Wenn Sie eine schrittweise Animation für ein Element erstellen, werden alle Einstellungen der Basisanimation für dieses Element aufgehoben.

Beginnen Sie mit der Erstellung einer Schritt-für-Schritt-Animation, indem Sie ein Ereignis auswählen - eine Bedingung, unter der die Animation abgespielt werden soll. Es stehen fünf Bedingungen zur Auswahl:

• Element auf dem Bildschirm - eine Animation wird abgespielt, sobald ein bestimmtes Element auf dem Bildschirm erscheint;
• Block auf dem Bildschirm - eine Animation wird abgespielt, wenn ein ganzer Block auf dem Bildschirm erscheint;
• Bei Bildlauf - eine Animation wird abgespielt und läuft während des Bildlaufs weiter;
• Beim Schweben - eine Animation wird beim Schweben abgespielt;
• Bei Klick - eine Animation wird bei Klick abgespielt.

Für den Startpunkt der Animation gibt es drei zusätzliche Optionen: Start-Trigger, Schleife und Trigger-Versatz.

• Der Start-Trigger ist ein Bereich oder ein Gegenstand, der Ihre Animation starten wird. Sie können zwischen drei Bereichen wählen: oben im Fenster, in der Fenstermitte oder unten im Fenster;
• Der Auslöseversatz ist der Versatz des Startpunkts der Animation zum ausgewählten Fenster oben, Fenster Mitte oder Fenster unten;
• Loop wird verwendet, um eine Animation in einer Schleife abzuspielen.

Sie können eine Animation oder ein ausgewähltes Element oder alle Elemente des Blocks testen, indem Sie auf Element abspielen oder Alles abspielen klicken.

Der erste Schritt war standardmäßig eingestellt. Er heißt "Start". Fügen Sie Schritte hinzu und ändern Sie die Elementeigenschaften bei jedem Schritt. Dadurch wird das Element verändert.

Um einen Schritt hinzuzufügen, klicken Sie auf Schritt hinzufügen.

Sie können zwischen den Schritten wechseln. Die blaue Umrandung eines Elements bedeutet, dass sich das Element in seiner ursprünglichen Position befindet, während die grüne Umrandung des Elements bedeutet, dass der Schritt gerade bearbeitet wird.

Jeder Schritt verfügt über eine Reihe von Eigenschaften wie Dauer, Verschieben, Skalieren, Deckkraft, Drehen, Erleichterung und Verzögerung.

Dauer ist die Dauer einer Animation in Sekunden.
Verschieben sind die Koordinaten, an denen das Element relativ zu seiner ursprünglichen Position verschoben wird. Um sie einzurichten, können Sie entweder Werte zuweisen oder das Element verschieben.
Skalieren ist der Grad der Vergrößerung oder Verkleinerung des Elements am Ende des Schritts.
Deckkraft ist der Wert der Elementtransparenz am Ende des Schritts.
Drehen ist die Drehung eines Elements in Grad am Ende des Schritts.
Erleichterung ist die Option zur Auswahl eines Animationseffekts: Linear (lineare Ausführung der Animation); easeIn, easeOut, easeInOut (Verlangsamung am Anfang, am Ende oder sowohl am Anfang als auch am Ende der Animation); bounceFin (ein kleiner Sprung eines Elements am Ende der Animation).
Delay ist die Dauer einer Pause, bevor eine Animation abgespielt wird.

Schauen wir uns an, wie man dieses gelbe Quadrat um 550 Pixel nach rechts verschiebt, es während der Bewegung verkleinert und wieder in seine ursprüngliche Position zurückbringt.

Hier ist eine Schritt-für-Schritt-Anleitung mit unseren Kommentaren unten:

Zusätzlich zu den Schaltflächen "Element abspielen" und "Alles abspielen" können Sie auch eine Vorschau Ihrer Animation anzeigen.

Öffnen Sie zwei Registerkarten in Ihrem Browser: Zero Block und die gleiche Seite im Vorschaumodus.

Wenn Sie also auf Zero Block auf "Speichern" klicken, sehen Sie die Änderungen auf der Vorschauseite, nachdem Sie sie aktualisiert haben.