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

Es gibt zwei Animationsmodi in Zero Block:

1) Basic Animation ist eine einfache Animation. Dabei handelt es sich um vorgefertigte, am häufigsten verwendete Effekte, wie z. B. den Darstellungseffekt (durch Deckkraft, von unten nach oben, von rechts nach links usw.), Parallaxe und Fixierung. Diese reichen in 90% der Fälle aus.

Leitfaden für grundlegende Animations→

2) Die Schritt-für-Schritt-Animation ermöglicht es Ihnen, helle, kreative Ideen zu verwirklichen – ganz nach Ihren Wünschen.

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

Das Schritt-für-Schritt-Animationstool ist in Zero Block verfügbar, einem Web-Editor, der sich an professionelle Designer richtet. Fügen Sie der Seite einen Zero Block hinzu, indem Sie ihn in der Blockbibliothek auswählen (direkt unter der Kategorie "Sonstiges"), oder klicken Sie unten auf der Seite auf Zero Block.

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

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

Das Erstellen einer Schritt-für-Schritt-Animation für ein Element löscht alle grundlegenden Animationseinstellungen für dieses Element.

Beginnen Sie mit der Erstellung einer Schritt-für-Schritt-Animation, indem Sie ein Ereignis auswählen – eine Bedingung für den Start der Wiedergabe der Animation. Es stehen fünf Bedingungen zur Auswahl:

• Element auf dem Bildschirm: Eine Animation wird abgespielt, sobald ein bestimmtes Element auf dem Bildschirm angezeigt wird.
• Block auf dem Bildschirm – Eine Animation wird abgespielt, wenn ein ganzer Block auf dem Bildschirm angezeigt wird.
• Beim Scrollen – Eine Animation wird während des Bildlaufs wiedergegeben und fortgesetzt.
• Auf Hover: Beim Hovern wird eine Animation abgespielt.
• Beim Klick – Eine Animation wird beim Klicken wiedergegeben.

Der Startpunkt der Animation hat drei zusätzliche Optionen: Start Trigger, Loop und Trigger Offset.

• Start Trigger ist ein Bereich oder eine Sache, die Ihre Animation startet. Wählen Sie aus drei Bereichen: Oben im Fenster, Mitte im Fenster oder Unten im Fenster;
• Trigger-Offset ist der Offset des Startpunkts der Animation zum ausgewählten Fenster oben, Fenstermitte oder Fenster unten;
• Loop wird verwendet, um eine Animation so einzurichten, dass sie in einer Schleife abgespielt wird.

Sie können eine Animation oder ein ausgewähltes Element oder alle Elemente im Block testen, indem Sie auf Play Element oder Play All klicken.

Der erste Schritt wurde standardmäßig eingestellt. Es heißt Starten. Fügen Sie Schritte hinzu und ändern Sie die Elementeigenschaften bei jedem Schritt. Dadurch ändert sich das Element.

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

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

Jeder Schritt verfügt über eine Reihe von Eigenschaften wie Dauer, Verschieben, Skalieren, Deckkraft, Drehen, Beschleunigungen 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.
Skalierung ist der Grad der Erhöhung oder Verringerung des Elements am Ende des Schritts.
Die Deckkraft ist der Wert der Elementtransparenz am Ende des Schritts.
Drehen ist die Drehung eines Elements in Grad gegen Ende des Schritts.
Lockerung ist die Option, um einen Animationseffekt auszuwählen: Linear (lineare Animationsausführung); easeIn, easeOut, easeInOut (Verlangsamung am Anfang, Ende oder beidem am Anfang und am Ende der Animation); bounceFin (ein kleiner Bounce eines Elements am Ende der Animation).
Verzögerung ist die Dauer einer Pause, bevor die Wiedergabe einer Animation beginnt.

Sehen wir uns an, wie Sie dieses gelbe Quadrat um 550 Pixel nach rechts verschieben, während der Bewegung verkleinern und an seine ursprüngliche Position zurückkehren.

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

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

Öffnen Sie zwei Tabs in Ihrem Browser: Zero Block und dieselbe Seite im Vorschaumodus.

Wenn Sie also auf In Zero Block speichern klicken, sehen Sie Änderungen auf der Vorschauseite, nachdem Sie sie aktualisiert haben.