Share
Hype 3 von Tumult ist eine OS X-Anwendung zum Erstellen von HTML5-Animationen. Wenn Sie jemals die ikonischen Zeitachsenwerkzeuge von Flash verwendet haben, ist die Benutzeroberfläche von Hype 3 sehr vertraut. In diesem Lernprogramm werden wir uns schnell mit der Anwendung vertraut machen und dann mit den verfügbaren Tools eine grundlegende Material Design-Animation erstellen.
Hype 3 kostet zum Zeitpunkt des Schreibens 49,99 US-Dollar für die Standardanwendung. Wenn Sie erweiterte Funktionen benötigen, ist Hype 3 Professional für 99,99 US-Dollar erhältlich. Sie können eine 14-tägige Testversion herunterladen.
Entschuldigung, das ist nur Mac.
Als Mac-Benutzer sind Sie mit dem App-Layout bestens zu Hause. Wir verwenden die Standard Edition von Hype 3 (die Pro-Version hat eine dunklere, vollere Benutzeroberfläche). Lassen Sie uns die wichtigsten Teile durchgehen:
Hype 3-SchnittstelleWenn Sie die Anwendung öffnen, erhalten Sie standardmäßig ein leeres Dokument. Beginnen Sie damit, herauszufinden, wie groß Ihre Leinwand sein soll.
Die Registerkarte "Szene"Unter dem Szene Auf der Registerkarte sehen Sie einige Optionen zum Festlegen der aktuellen Szene. Ich habe mich für die Leinwandgröße von 600x400px entschieden. Klicken Sie danach auf die Farbauswahl Hintergrund und ändern Sie das zu # 424242.
Hinweis: Wir werden in diesem Tutorial nur mit einer Szene und einer Zeitleiste arbeiten. Es ist jedoch möglich, mehrere Szenen mit zahlreichen Zeitachsen zu haben und zwischen ihnen zu wechseln.
Wir animieren einen der Floating Action Buttons von Google Material Design Elemente Menüsymbol und wählen Sie die Ellipse:
Verwenden Sie Ihren Mauszeiger, um auf der Bühne zu zeichnen Verschiebung wird die Proportionen auf einen Kreis beschränken (ähnlich wie bei einer Grafikanwendung). Gemäß den Material Design-Richtlinien sollte die große, schwebende Aktionstaste 56 Pixel breit sein und ein Symbol von 24 Pixel aufweisen. Machen Sie Ihre zu diesen Zahlen proportional:
Spitze: gehe zu Ansicht> Lineal anzeigen Lineale erscheinen neben Ihrer Bühne. Ziehen Sie einige Hilfslinien von den Linealen auf die Bühne, um das Positionieren von Objekten zu erleichtern.
Mit der ausgewählten Ellipse unter der Element Auf der Registerkarte können Sie die Hintergrundfarbe ändern (ich habe # 00E676 aus der Material Design-Farbpalette verwendet) und den Rand entfernen.
Auch unter der Element Auf der Registerkarte können Sie dem Kreis einen Schatten hinzufügen. Ich habe unseren eine 5px-Unschärfe gegeben und sie um 5px auf der Y-Achse verschoben. Es hat die Farbe # 2E2E2E, Sie können jedoch keine Mischmodi auswählen. Jetzt sieht es sehr nach "Material Design" aus, ich glaube, Sie stimmen zu:
Um der Schaltfläche ein Pluszeichen hinzuzufügen, stehen uns einige Optionen zur Verfügung. Wir könnten die Zeichenwerkzeuge verwenden, um sie selbst zu erstellen, aber die Werkzeuge sind begrenzt (insbesondere, wenn Sie die Freiheit von Adobe Illustrator oder Sketch gewohnt sind). Stattdessen holen wir uns das SVG-Symbol von Google.
Wählen Sie das Symbol "Hinzufügen", wählen Sie die weiße Variante und laden Sie sie herunter.
Sie können die SVG-Datei jetzt direkt in Ihr Dokument ziehen und dann als Bildebene hinzufügen.
Wenn das SVG-Symbol ausgewählt ist, unter der Metriken Stellen Sie sicher, dass es die richtige Größe für Ihre Animation hat:
Unser SVG-Symbol wurde nicht als bearbeitbarer Vektor importiert. Stattdessen, wenn Sie sich das ansehen Elemente Auf der Registerkarte sehen Sie, dass es sich um eine separate Ressource handelt, die als Hintergrundbild angewendet wird. Das bedeutet, wir können nicht seine Farbe ändern oder so etwas (Scham).
Dieser Ansatz kann auch zu Problemen in einigen Browsern führen, obwohl Hype 3 Sie darauf hinweist:
Wie bei vielen Grafikanwendungen können Sie jetzt die beiden Ebenen auswählen, die wir unserer Timeline hinzugefügt haben, und dann zu gehen Anordnen> Gruppe sie etwas besser zu organisieren. Doppelklicken Sie auf den Namen der Gruppenebene, um ihn umzubenennen:
Hype 3 bietet eine Reihe von Methoden zum Animieren von Objekten und deren Eigenschaften. Wir fangen mit dem direktesten an, also machen Sie weiter und schlagen Sie das große, rote Aufzeichnung Taste:
Jetzt ziehen Sie die Abspielkopf über die Timeline und stoppt bei Bild 24.
Hinweis: Sie sehen auf der Timeline markierte Sekunden, die jeweils 30 Frames umfassen.
Wählen Sie nun mit dem Abspielkopf in Bild 24 das Symbol "Hinzufügen" aus, und wechseln Sie zu Metriken Tab in der rechten Seitenleiste, dann finden Sie die Drehung Abschnitt und ändern Sie die Z Wert bis 45 °. Dadurch wird das Symbol so gedreht, dass es jetzt wie ein Kreuz aussieht (×)..
Sie können jetzt auf klicken Aufzeichnung Taste erneut, um den Vorgang zu beenden.
Hype 3 hat am Anfang der Zeitleiste (dies ist der Anfangszustand) und am Ende der Animation (Endzustand) automatisch ein Eigenschafts-Keyframe hinzugefügt. In diesem Fall haben wir nur das geändert Drehwinkel (Z) Eigenschaft, also erscheinen dort die Keyframes.
Wenn Sie auf Play drücken oder den Abspielkopf entlang der Timeline ziehen, wird das Symbol nahtlos zwischen den beiden Eigenschaftszuständen animiert.
Um das Anzeigen der Ereignisse auf der Timeline zu erleichtern, erhöhen Sie den Timeline-Skalierungswert mithilfe des Schiebereglers oben rechts:
Wenn Sie unsere Eigenschaftsanimation ausgewählt haben (klicken Sie darauf), können wir die Art der Beschleunigung ändern, die für die Animation verwendet wird. Standardmäßig wird es sein Bequemlichkeit, was bedeutet, dass die Animation langsam beginnt, beschleunigt und dann zum Ende hin wieder langsamer wird.
Was sollen wir noch animieren? Lassen Sie uns so aussehen, als ob unser Button etwas tut - wir zeigen eine Karte, wenn der Button geklickt zu sein scheint.
Verwenden Sie die Elemente Menü zum Hinzufügen eines Rechteck zur Bühne. Benennen Sie die Ebene "Karte". Vergeben Sie eine Hintergrundfarbe (# 757575) und platzieren Sie die Ebene unter der Tastengruppe. Positionieren Sie es außerhalb der Bühne und reduzieren Sie die Deckkraft auf 0 (wir werden jetzt einige Eigenschaften animieren).
Jetzt, anstatt zu schlagen Aufzeichnung, Dieses Mal werden wir die Dinge manuell machen. Klicken Sie mit dem Abspielkopf am Anfang der Animation und der ausgewählten Kartenebene auf Keyframe hinzufügen auf der Opazität Eigenschaftsschicht. Bewegen Sie dann den Abspielkopf an das Ende der Animation und fügen Sie ihn hinzu Ein weiterer Keyframe.
Während auf dem letzten Keyframe im Element geben Sie dem Rechteck eine Deckkraft von 100%. Sie haben jetzt eine nette Animation zwischen den beiden Zuständen.
Nachdem Sie die Deckkraft des Rechtecks animiert haben, animieren Sie nun seine Position (wir möchten, dass sie nach oben gleitet). Dies wird mit der Origin (Top) -Eigenschaft erreicht. Wiederholen Sie den gerade ausgeführten Vorgang, indem Sie am Anfang der Animation einen Keyframe hinzufügen, einen am Ende, und dann die Position des Rechtecks im endgültigen Keyframe ändern.
Sie sollten einen Pfad sehen, der die Bewegung des Rechtecks angibt:
Im Moment geschieht alles zur selben Zeit, sobald die Szene beginnt, aber wir können das ändern. Machen wir es so, dass es eine kurze Verzögerung gibt, dann dreht sich das Symbol schnell, und die Karte schiebt sich allmählich ein.
Ziehen Sie die Animationsbalken auf die obere Timeline, um die verschiedenen Elemente unterschiedlich zu steuern:
Hinweis: Vergessen Sie nicht, dass Sie die Beschleunigung ändern können, um verschiedene Effekte zu erzielen. Sehen Sie sich die Richtlinien von Google zu Authentic Motion an, um mehr Inspiration zu erhalten.
Sobald Ihre Animation abgeschlossen ist, gehen Sie zu Datei> Als HTML5 exportieren oder Datei> Als Film exportieren. Die verfügbaren Optionen sind ziemlich selbsterklärend. Wählen Sie ein Verzeichnis mit HTML-Code zusammen mit den JavaScript- und SVG-Elementen, animierten GIF-Dateien, MP4-Dateien usw. aus.
Beachten Sie, dass beim Exportieren als Film jede Interaktion, die Sie hinzugefügt haben (in diesem Fall nicht), die Sequenz ruinieren kann.
Zeit für eine Aufgabe! Wenn Sie diesem Tutorial folgen, sind Sie mit den Fähigkeiten ausgestattet, um diese Animation noch weiter zu führen. Laden Sie die Quelle herunter und Sie finden die Starterdateien, die Sie benötigen, um Sie an diesen Punkt zu bringen.
Zeitleisten sind äußerst hilfreich für die Visualisierung von Animationen beim Erstellen. Über das, was wir hier getan haben, erlaubt Hype 3 auch alle Arten von Interaktionen, Ereignissen und Timeline-Kontrolle (dies ist jedoch ein ganz anderes Tutorial). Viel Spaß beim Spielen mit diesen Tools, Bauen Sie auf und zeigen Sie uns, was Sie in den Kommentaren finden!
Accentsconagua