Welche Methode zum Erstellen einer Eröffnungsanimation für eine Webseite zu verwenden ist

Ich benötige Rat, welches Programm ich verwenden soll, um eine Eröffnungsanimation für eine Webseite zu erstellen, die ähnlich wie diese aussieht: http://melaniedaveid.com/

Ich kenne mich am besten mit Adobe Illustrator aus und bin mit Codierung nicht vertraut. Ich frage mich, ob das Erstellen der Animation als GIF in Illustrator der richtige Weg wäre? Ich möchte sicher sein, dass es kein Problem mit dem Laden der Webseite geben wird.

Welches Programm eignet sich am besten für einen Anfänger, um eine Animation zu illustrieren und welches Format für eine Webseite?

Danke

Schließe mich Elis Antwort an. Ich würde die JS-Bibliothek maxwellito.github.io/vivus auschecken . Dies könnte schwierig sein, wenn Sie nicht mit Codierung vertraut sind, aber vielleicht finden Sie es heraus!
Was mir in den Sinn kam, war lazylinepainter.info
Obwohl das Beispiel nicht schlecht ist, beachten Sie, dass „Eröffnungsanimationen“ bestenfalls passé und schlimmer noch nervig sind. Verwenden Sie sie äußerst sparsam.
Die verlinkte Seite verwendet CSS3 und HTML5 für ihre Animationen - technische Kenntnisse erforderlich :)
Zum Erstellen von HTML-Animationen ohne Programmierkenntnisse empfehle ich einen Blick auf Adobe Edge Animate: creative.adobe.com/en/products/animate
@PieBie Edge Animate war jedoch mein erstes, bevor ich die Beispielanimation gesehen habe. Ich bin mir nicht ganz sicher, dass es einfach wäre, EA zu verwenden, um solche Linien zu animieren (oder möglich ...?), besonders wenn nicht alles innerhalb von EA gezeichnet wird. Andererseits habe ich es nicht viel benutzt.
Nun, ich habe EA ausgiebig verwendet und bin ziemlich zuversichtlich, dass ich dies in EA durch Zuschneiden replizieren könnte. ABER in diesem speziellen Fall wäre ein animiertes SVG die elegantere und weniger schmerzhafte Lösung.

Antworten (3)

Mit Illustrator können Sie die Linien zeichnen und dann den SVG-Code auf Ihre Website exportieren

So erzielen Sie einen Effekt:

http://codepen.io/chriscoyier/pen/bGyoz

Hier erfahren Sie mehr über SVG-Animation https://css-tricks.com/svg-line-animation-works/

Grundsätzlich gibt es drei Dinge, die Sie tun können, abhängig von Ihren Fähigkeiten und Ihren Wünschen.

  1. Erstellen Sie ein Video und stellen Sie es auf Autoplay ein und blenden Sie die Videoplayer-Oberfläche aus. Je nachdem, wie komplex die Animation sein wird, ist dies möglicherweise die einfachste Lösung, führt jedoch zu der schlechtesten Qualität bei der größten Dateigröße.
  2. Machen Sie eine SVG-Animation (wie von Eli empfohlen). Dies erfordert ein wenig Codierung, aber Sie können möglicherweise eine Menge Arbeit in Illustrator erledigen. Auch das reicht nicht für sehr komplexe Animationen.
  3. Verwenden Sie das Canvas-Element und vielleicht ein Vektorgrafik-Framework wie paper.js. Dies erfordert wahrscheinlich die meiste Programmierung, ist aber meiner Meinung nach der eleganteste Weg (es gibt keine großen Teile von Bildinformationen direkt in Ihrem HTML-Code wie beim SVG-Weg) und liefert Ihnen die beste Qualität. Dies bietet Ihnen auch nahezu unbegrenzte Möglichkeiten, da Sie alle möglichen Dinge tun können, z. B. den Cursor verfolgen und die Animation darauf reagieren lassen.

Schauen Sie sich https://www.chromeexperiments.com an – sie basieren im Grunde alle auf dem Canvas-Element und geben Ihnen eine Vorstellung davon, was damit gemacht werden kann.

Ich fürchte, wenn Sie überhaupt nicht programmieren können und es nicht lernen wollen und niemanden haben, der es kann, ist dies keine geeignete Lösung. Es ist nur: Sie können im Web nicht sehr weit kommen, wenn Sie benutzerdefinierte Dinge wie Animationen und dergleichen ohne Codierung wünschen.

Leute veröffentlichen einige gute Ressourcen zu den anderen Antworten. Ich werde nur Ihre Optionen zusammenfassen.

Ausgabeformate:

SVG Kann im Code mit Javascript animiert werden.

Canvas Auch ein starkes Javascript-Verständnis ist erforderlich.

Animiertes gif Es ist ein Format, das gut zu Ihrem Beispiel passt. Es ist ein wiederbelebtes Format, das bei Animationen mit flachem Design gut funktioniert.

CSS Verwendet wahrscheinlich Sprites.

Video Gut. es ist ein Video.

Programme

  • Irgendein Vektorprogramm. Illustrator, Corel, Inkscape.

  • Ein Programm für Animation, After Effects? (zu viel Kraft dafür)

  • Blinken

  • Vektorianischer Giotto http://vectorian.com/giotto/

  • Machen Sie einen Sprite oder geschichteten Ansatz.

  • Oder JavaScript-Codierung.

Propbaby ist die sicherste Möglichkeit, ein animiertes GIF zu verwenden.

Welche Methode zum Erstellen einer Eröffnungsanimation für eine Webseite zu verwenden ist
AntwortenHierDatenschutz-Bestimmungen1y, 0v