Fortgeschrittenes Timing & Locking für Webanimationen mit Tumult Hype

Key Takeaways

• Tumult Hype ist ein modernes Webanimationstool, mit dem Animatoren Keyframes (Start- und Stopppunkte) erstellen können, und der Computer füllt dynamisch alle Zwischenrahmen aus. Die Art und Weise, wie der Computer diese Frames erzeugt, kann die Aufmerksamkeit und die emotionale Verbindung eines Betrachters beeinflussen.
• Timing -Funktionen spielen eine entscheidende Rolle bei der Humanisierung der Elemente, die Sie animieren. Sie können dazu beitragen, Informationen sauber und klar zu präsentieren, den Fokus direkt zu fokussieren, Emotionen zu vermitteln und zu unterhalten und sich zu engagieren. Timing -Funktionen können auch die Bewegung sowohl der „leblosen“ und „animierten“ Objekte modellieren.
• Tumult Hype bietet einen benutzerdefinierten Zeitleitungsfunktionseditor, mit dem Kontrollpunkte manipulieren und neue Punkte auf der Kurve hinzufügen können, um Ihre eigenen benutzerdefinierten Zeitfunktionen zu bilden. Diese Funktionen können für die zukünftige Verwendung im Hype -Dokument benannt und gespeichert werden und auch als Standard -Timing -Funktion für neue Animationen festgelegt werden.
• Praktische Tipps für die Verwendung von Timing -Funktionen beinhalten, dass Ihre Animation einige Tage „ruhen“, um zu sehen, ob es Ihnen immer noch gefällt, wenn Sie zurückkommen Fühlen Sie sich träge und beobachten Sie die Natur und verstehen Sie die Mathematik der Schwerkraft/Physik, um zu informieren, wie Animationen komponiert werden können.

Dieser Artikel wurde von Tumult gesponsert. Vielen Dank, dass Sie die Partner unterstützt haben, die SitePoint ermöglichen.

Animation kann ungefähr definiert werden als aufeinanderfolgende Bilder oder Frames, um die Illusion von reibungslosen Veränderungen zu verleihen. Anstatt jeden Frame von Hand zu produzieren, lassen moderne Webanimationstools wie Tumult Hype einen Animator Keyframes (im Allgemeinen Start- und Stopppunkte) erstellen und der Computer alle Zwischenräume dynamisch ausfüllt. Wie der Computer sich für die Erzeugung dieser Frames entscheidet, kann die Aufmerksamkeit und die emotionale Verbindung eines Betrachters beeinflussen. In diesem Artikel wird ein kritisches Stück generierter Animationen, die Timing -Funktion und die Verwendung von Tumult Hype's Advanced Timing Function -Editor für Ihre Animationen untersucht.

Vor dem Lesen besteht der erste Schritt darin, den Tumult -Hype herunterzuladen. Der Versuch ist 14 Tage lang voll funktionsfähig. Tumult Hype hat zwei Geschmacksmodi: Standard und Profi. Um benutzerdefinierte Timing -Funktionen zu erstellen (und mit diesem Artikel zu folgen!), Sie möchten Hype Professional verwenden.

lineare und lockere Timing -Funktionen

Nehmen wir an, Sie möchten eine Box animieren, die sich über den Bildschirm bewegt. Im Laufe von zwei Sekunden werden Sie es links 300 Pixel bewegen. Bei der Erzeugung einer Animation muss der Computer die Position der Box rechtzeitig bestimmen, und dies ist die Rolle der Timing -Funktion. Die grundlegendste davon ist die lineare Interpolation, die gleichmäßig die Entfernung durch die Anzahl der Frames unterteilt. Somit würde eine 30-Frames-pro-Sekunden-Animation jeweils den Kasten 5 Pixel als 300px / (2s * 30fps) = 5px verschieben lassen. Dies erstellt erfolgreich eine Animation:

Um subjektiv zu sein, diese Animation ist langweilig! Es bewegt sich ohne natürliche Körperlichkeit oder Gewicht. Die Augen eines Betrachters müssen die Geschwindigkeit einholen, die sich bewegt, und wird dann wahrscheinlich ihren Blick übertrieben, wenn die Animation abrupt endet. Die häufigste Lösung besteht darin, eine grundlegende Beschleunigung und Verzögerung auf die Box anzuwenden. Diese Timing -Funktion wird als Leichtigkeit in die Ausgabe bezeichnet:

Das sieht besser aus und ist die häufigste Wahl für Animationen. Es ist die Standard -Timing -Funktion im Tumult -Hype und die meisten anderen Animationstools aus gutem Grund.

Darstellung von Zeitleitungsfunktionen

Um genauer zu sein, gibt eine Timing -Funktion den Zeitwert (x) ein und gibt einen Wert der animierten Eigenschaft (y) aus. Wenn Sie an die Mittelschule-Algebra zurückgerufen werden, sind F (x) = Y-Stil-Funktionen eine Form, die in einem 2D-Diagramm dargestellt werden kann. Die grundlegende lineare Timing -Funktion sieht wie erwartet aus, eine Zeile:

Leichter in die Out ist eine sanfte Kurve, die zeigt, wie sie mit langsameren Geschwindigkeiten beginnen und endet:

Diese Zeitfunktion wird mit der Mathematik einer kubischen Bézier -Kurve erstellt. Durch Ändern der Kontrollpunkte, die die Krümmung beeinflussen, können unterschiedliche Beschleunigungen und Verzögerungen erreicht werden:

Die Eigenschaftswerte können sogar unter den Mindestwert oder über dem Maximalwert sinken, wodurch Vorfreude erzeugt und die Timing -Funktionen überschreiten:

Tumult Hype bietet noch mehr Leistung: Mehrere bézier-Kurven können kombiniert werden, um Multi-Kurve-Pfade zu bilden. Diese können für eine Vielzahl von Effekten wie Sprung oder Elastizität verwendet werden:

Allgemeine Argumentation, sich auf Timing -Funktionen in Ihren Animationen zu konzentrieren

Die Natur bewegt sich nicht mechanisch wie die obige lineare Timing -Funktion. Timing -Funktionen wie die Lockerung spielen daher eine entscheidende Rolle bei der Humanisierung der Elemente, die Sie animieren. Dies hilft, Informationen sauber und klar zu präsentieren. Es lenkt den Fokus.

Gutes Timing hilft, Animationen Bedeutung zu verleihen. Es verwandelt leblose Formen in die Realität. Einige können dazu beitragen, Emotionen zu vermitteln, die für das Branding von entscheidender Bedeutung sind. Andere Timings können unterhalten und sich anwenden.

Die Bewegung von „leblosen“ Objekten wird eher durch Physik regiert. "Animate" -Objekte werden von ihren eigenen Gedanken und Emotionen regiert. Beide Stile können mit Timing -Funktionen modelliert werden.

Timing -Funktionen in Tumult Hype

anwenden

Bearbeiten der Timing -Funktion einer Animation im Tumult -Hype ist einfach. Schritt Null macht die Animation. Wenn Sie also unbekannt sind, lesen Sie die Tutorials und die Dokumentation.

Um die Timing-Funktion einer einzelnen Animation anzupassen, können Sie die Animationsindikatorleiste zwischen KeyFrames im Bereich pro Eigentum doppelklicken:

Wenn mehrere Animationen ausgewählt sind, können Sie die Timing -Funktion Pop -up -Taste auf der rechten Seite der Zeitachterschnittstelle verwenden:

Wenn keine Animationen ausgewählt sind, wird die Standard -Timing -Funktion als Titel der Timing -Funktion Pop -up -Taste angezeigt.

In Hype Professional ermöglicht diese Schnittstelle die Manipulation von Steuerungspunkten und das Hinzufügen neuer Punkte auf der Kurve, um Ihre eigenen benutzerdefinierten Zeitfunktionen zu bilden. Timing -Funktionen können benannt werden, damit sie für die zukünftige Verwendung im Hype -Dokument gespeichert werden. Sie können auch als Standard -Timing -Funktion für neue Animationen festgelegt werden:

Dieser Editor ähnelt anderen Vektor -Bearbeitungs -Apps. Hier ist das Cheat -Blatt, um Steuerpunkte zu manipulieren:

• Klicken Sie auf Kurve: Fügen Sie einen neuen Punkt hinzu
• Taste löschen: Entfernen Sie den Steuerpunkt
• Option Klick: Konvertieren Sie in abgewinkelten Scheitelpunkten
• Option-Drag: Ziehen Sie neue Steuerpunkte aus
• Option (während des Ziehens des Steuerpunkts): Spiegelte
• Befehl (während des Ziehens des Steuerpunkts): getrennt
• Keine (nur Ziehen des Kontrollpunkts): Asymmetrisch
• Verschiebung (während des Ziehens des Kontrollpunkts): bei 45 ° Winkel
halten

Praktische Tipps für die Verwendung von Timing -Funktionen

Handwerk und Auswahl von Timing -Funktionen ist eine Fähigkeit, die Erfahrung wird eine besser machen.
Lassen Sie Ihre Animation „ruhen“, indem Sie ein paar Tage ohne sie sich ansehen, und sehen Sie, ob Sie sie immer noch mögen, wenn Sie zurückkommen. Oder Feedback von Gleichaltrigen erhalten.
Looped -Animationen sollten im Allgemeinen eine lineare Timing -Funktion verwenden. Easy-basierte Timing-Funktionen würden zu Beginn des Schleifenzyklus einen Stopppunkt erzeugen oder springen.
Vermeiden Sie eine signifikante Lockerung (langsame Beschleunigung) mit Animationen, die durch Benutzeraktionen ausgelöst wurden, da es sich träge anfühlt.
Überschwingen (zurück) und Vorfreude (umgekehrt zurück) können Effekte sein, die glorreich aussehen können, aber dies widerspricht oft dem Zweck einer Animation, einem Betrachter zu helfen, Aktionen zu assoziieren. Darüber hinaus können diese Zeit für die Zeit eines Benutzers verschwenden, da sie länger dauern. Verwenden Sie sparsam.
Es kann gut sein, mit denselben Animationsdauern und unterschiedlichen Zeitfunktionen zu experimentieren, um mehr visuelle Intrigen zu erhalten oder unterschiedliche Gewicht/Trägheit auszudrücken. Das heißt, es sei denn, es ist besser, nicht mit zu vielen verschiedenen Timing -Funktionen über Bord zu gehen. Vergessen Sie nicht, auch mit atemberaubenden Animationsstartzeiten oder stattdessen eine geringfügige sich ändernde Dauer zu experimentieren.
Genau wie Visuals häufig eine Spezifikation für Liniengewichte und Farbpaletten haben, ist es gut, eine Designsprache für Animationen einschließlich Dauern und Timing -Funktionen zu entwickeln, zusammen mit Begründung, welche Umstände die Timing -Funktion auswählen können. Beobachten Sie die Natur und verstehen Sie die Mathematik der Schwerkraft/Physik, da dies helfen kann, zu informieren, wie Animationen komponiert werden. Um beispielsweise ein springendes Objekt zu erstellen, sollte der Y -Wert die Bounce -Timing -Funktion verwenden. Der X -Wert sollte eine lineare Zeitfunktion haben, da keine Kräfte auf dieser Achse wirken. Selbst wenn es gut verstanden wird, ist es manchmal einfacher, eine Physik -Engine zu verwenden.
• Lassen Sie sich von der Natur oder von Master -Animatoren inspirieren:
  Timing für Animation von John Halas und Harold Whitaker
  Das Überlebenskit des Animators von Richard Williams

Schlussfolgerung

Manipulieren von Timing -Funktionen ist ein erweiterter Schritt zum Erstellen sinnvoller Animationen. Sie können sowohl Physik, Emotionen oder einfacher Keyframe -Konstruktion reduzieren. Der benutzerdefinierte Timing -Funktionskeditor von Tumult Hype bietet Kraft und Flexibilität, um Ihre besten Animationen zu erstellen.

Wenn Sie einen Hype ausprobieren möchten, können Sie als SitePoint -Benutzer bei 24,99 USD einen Hype -Standard für 50% Rabatt erhalten.

Oder wenn Sie der Version mit allen Schnickschnack nachgehen, bieten wir auch einen Rabatt von 25% für Hype -Profi zu 74,99 USD.

häufig gestellte Fragen zu erweiterten Timing -Funktionen und Lockern von Webanimationen

Was sind die wichtigsten Unterschiede zwischen CSS und JavaScript für Webanimationen? CSS ist im Allgemeinen einfacher und einfacher zu bedienen, was es zu einer guten Wahl für einfache Animationen macht. Es wird in den meisten Fällen auch besser als JavaScript ausgeführt, da es Animationsaufgaben in die Rendering -Engine des Browsers abladen kann. JavaScript bietet jedoch mehr Kontrolle und Flexibilität und ermöglicht komplexe Animationen und Interaktionen. Es hat auch eine bessere Kompatibilität mit älteren Browsern.

Wie kann ich die Webanimationen -API verwenden? Sie können Elemente direkt aus JavaScript erstellen, steuern und animieren. Um es zu verwenden, müssen Sie zunächst ein Animationsobjekt mithilfe der Methode Element.Animate () erstellen, die Keyframes und Timing -Optionen als Argumente übergeben. Sie können dann die Animation mithilfe von Methoden wie Play (), pause () und reverse () steuern.

Was sind Lockerungsfunktionen und wie funktionieren sie? die Geschwindigkeit einer Animation im Laufe der Zeit zu steuern. Sie können Animationen natürlicher machen, indem sie die Art und Weise nachahmen, wie sich die Dinge in der realen Welt bewegen. Zum Beispiel bewegen sich Objekte normalerweise langsam, beschleunigen und verlangsamen dann erneut, bevor sie anhalten. Die Lockerungsfunktionen können unter anderem linear, einleichtert, entlastet oder einleichtert werden. Tumult Hype ist ein leistungsstarkes Tool zum Erstellen von HTML5 -Animationen und interaktiven Inhalten. Es verfügt über eine benutzerfreundliche Oberfläche, mit der Sie Elemente entwerfen und animieren können, ohne Code zu schreiben. Es unterstützt jedoch auch JavaScript für fortgeschrittenere Funktionen. Zu den wichtigsten Funktionen von Tumult Hype gehören zeitlinienbasierte Animation, Szenenverwaltung und reaktionsschnelle Layouts.

Wie kann ich meine Webanimationen für eine bessere Leistung optimieren? Leistung. Versuchen Sie zunächst, CSS für einfache Animationen zu verwenden, wann immer möglich, da es besser als JavaScript funktioniert. Zweitens verwenden Sie die RequestAnimationFrame () -Methode für JavaScript -Animationen, da der Browser die Animationsschleife optimieren kann. Drittens vermeiden Sie animierende Eigenschaften, die Layout oder Malerei auslösen, da sie in Bezug auf die Leistung teurer sind.

Was sind KeyFrames in Webanimationen? Sie werden verwendet, um die Zwischenschritte in einer CSS -Animationssequenz zu steuern. Sie können so viele Keyframes angeben, wie Sie möchten, und der Browser interpoliert die Animation zwischen ihnen.

Wie kann ich meine Webanimationen reagieren? Um sicherzustellen, dass sie sich an verschiedene Bildschirmgrößen und -orientierungen anpassen. Dies kann erreicht werden, indem relative Einheiten wie Prozentsätze anstelle von absoluten Einheiten wie Pixel verwendet werden und Medienabfragen verwendet werden, um die Animationsparameter anhand der Ansichtsfenstergröße anzupassen.

Was sind die besten Praktiken für Webanimationen? >

Einige Best Practices für Webanimationen umfassen die Einfache von Animationen einfach und subtil, die Verwendung von Lockerungsfunktionen, damit sich Animationen natürlicher anfühlen, Animationen für die Leistung optimieren und Animationen reaktionsschnell machen. Es ist auch wichtig sicherzustellen, dass Animationen die Benutzererfahrung verbessern und nicht davon ablenken. verwendet werden, um Webanimationen zu testen und zu debuggen. Mit diesen Tools können Sie die Animationseigenschaften inspizieren, die Animationswiedergabe steuern und die Animationszeitleiste visualisieren. Sie können auch JavaScript verwenden, um Animationsereignisse und Zustände zu protokollieren.

Kann ich Webanimationen verwenden, um die Zugänglichkeit zu verbessern? Benutzer durch Interaktionen führen und die allgemeine Benutzererfahrung verbessern. Es ist jedoch wichtig sicherzustellen, dass Animationen für Benutzer mit Bewegungsempfindlichkeit oder anderen Zugänglichkeitsanforderungen keine Probleme verursachen. Sie können mit der Medienabfrage zur Beschäftigungsbewegungsbewegung die Animationen für diese Benutzer anpassen oder deaktivieren.

Das obige ist der detaillierte Inhalt vonFortgeschrittenes Timing & Locking für Webanimationen mit Tumult Hype. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!