Animierte SVG-JavaScript-Infografik für die Zeitleiste

Ich erwäge, eine animierte Infografik basierend auf SVG-, Javascript- und CSS-Technologien einer Zeitleiste zu erstellen. Ich habe viel Erfahrung im Programmieren, aber nicht so sehr darin, diese Technologien zu verwenden, um etwas zu animieren (bedeutet, dass Sie mir möglicherweise sagen könnten, dass ich das Problem anders angehen sollte).

Mit Inkscapekann ich ein großes SVG-Bild erzeugen (groß in der horizontalen Dimension und auch relativ groß in der Dateigröße, es sei denn, ich vermeide das Einbetten der Pixelgrafiken). Das SVG enthält viele Felder für Ereignisse (SVG-Gruppen), die ich beim Anklicken vergrößern möchte, damit die Details sichtbar werden. Ich denke, ich könnte eine funktionierende Animation erstellen, die das gesamte SVG zeigt und es ermöglicht, alle Boxen separat zu vergrößern.

Da die Zeitleiste jedoch so lang ist, muss sie so gezoomt werden, dass jeweils nur ein Teil davon sichtbar ist. Es müssten einige Schaltflächen vorhanden sein, die es dem Benutzer ermöglichen, nach links oder rechts zu wechseln, um frühere oder spätere Ereignisse anzuzeigen. Aber immer noch, wenn der Benutzer auf eines der Ereignisse klickt, sollte es vergrößert werden.

Hier ist das Konzept in Bildern (das kleinere große Kästchen soll der Bildschirm oder der sichtbare Teil der Grafik sein):

Geben Sie hier die Bildbeschreibung ein

Ich frage mich, ob das ein praktikabler Ansatz ist (wie würde ich die Kombination der beiden Funktionen angehen?). Eine andere Möglichkeit wäre, für jedes der Ereignisse ein separates SVG oder was auch immer zu generieren und sie auf dem Bildschirm anders zu positionieren.

Da ich dies viele Male für verschiedene oder aktualisierte Zeitachsen wiederholen muss, muss ich das meiste programmgesteuert tun und an den Quelltextdateien arbeiten. Wenn jedoch eine solche einzelne Zeitleiste mit einem Tool erstellt werden kann, aus dessen Ergebnis ich lernen kann, wie es geht, bin ich offen für Vorschläge. In diesem Fall müsste ich wissen, wie.

Außerdem wäre es natürlich sehr nützlich, ein funktionierendes Beispiel zu haben, wenn es etwas Vergleichbares gibt.

Um welche Art von Inhalt handelt es sich bei den kleineren Elementen, die sich beim Anklicken vergrößern? Das ist eine große Determinante dafür, welchen Ansatz Sie verwenden sollten
Sie sind gruppierte SVG-Elemente, die Pfade, Text und Pixelgrafiken sein können. Die Pixelgrafiken können eingebettet oder extern sein. Da sie die ganze Datei etwas groß machen, ist der letztere Ansatz im Prinzip günstig. Sollten die Pixelgrafiken Probleme bereiten, ist es auch denkbar, diese möglichst nur in das 'vergrößerte' Feld aufzunehmen.

Antworten (1)

Ist es machbar?

Ja . So wie Sie darüber nachgedacht haben, ist es definitiv möglich, es so zu machen. Eine bessere Frage ist: "Gibt es bessere Möglichkeiten, dies zu tun?" in diesem Fall würde ich wahrscheinlich antworten .

Das einzige Mal, dass ich SVG dafür verwenden würde, ist, wenn die meisten Elemente, die Sie vergrößern möchten, ursprünglich SVG sind (z. B. Symbole), die Sie versuchen, so etwas zu veranschaulichen. Sie können die Viewbox von SVG animieren, um das horizontale Scrollen durchzuführen, und eine benutzerdefinierte Zoomfunktion ausführen, um in bestimmte Elemente zu zoomen (vielleicht speichern Sie die Viewbox vor dem Zoomen, damit Sie zu ihr zurückkehren können).

Wenn es viel Text, Fotos oder wirklich viel gibt, außer dem, was normalerweise ein SVG ist, würde ich mich dafür entscheiden , diesen Ansatz nicht zu verwenden.

Wenn Sie diesen Ansatz verwenden, stellen Sie sicher, dass Sie Ihre SVG(s) optimieren, indem Sie einige Regeln befolgen und einige Tools verwenden .

Stattdessen würde ich den Ansatz verwenden, eine normale Webseite zu erstellen, die horizontal scrollt. Dann würde ich HTML-Elemente für die kleineren Teile verwenden. Ein Grund dafür ist, dass verkleinerte (kleine) Inhalte nicht lesbar sind. Aber wenn Sie stattdessen die Inhaltsvorschau in dieser "ungezoomten" Ansicht verwenden, können Sie anstelle des "Zoomens" (es sei denn, es war ein Bild oder etwas Ähnliches) den gesamten Inhalt öffnen (oder vielleicht sogar eine neue Seite).

Damit meine ich, Übergänge wie die Materialdesign-Empfehlungen von Google zu verwenden . Diese Art von Animationen können relativ einfach (von einer Person, die weiß, was sie tut) mit JavaScript erstellt werden, aber Polymer hat einige eingebaut, wenn Sie ein Framework dafür verwenden möchten.

Sie können einige Schaltflächen hinzufügen, um horizontal zu scrollen, aber wenn Sie diesen Ansatz verwenden, empfehle ich, dass Sie die übliche Art und Weise, wie Leute scrollen, nicht deaktivieren. Es ist jedoch wichtig darauf hinzuweisen, dass die Seite horizontal scrollt, da Benutzer diese Art von Bewegung nicht gewohnt sind.

Mit diesem Ansatz können Sie alle Arten von Inhalten verarbeiten und trotzdem die gleiche Art von Zoom verwenden, über die Sie für SVGs und ähnliche Typen sprechen.

Einige Vorteile dieses Ansatzes sind:

  • Es verwendet die Standardnavigation des Browsers (gepaart mit einigen benutzerdefinierten Übergängen und Zoomen) und das Layout: Natives Scrollen ist immer weniger fehlerhaft als benutzerdefiniertes Scrollen. Nicht hartcodierte Positionen (wie in SVG) ermöglichen es, den Inhalt mit weniger Aufwand zu positionieren.
  • Es spart Dateigröße: Ein SVG dieser Größenordnung kann ziemlich umfangreich sein. Dies wirkt sich nicht nur auf die Ladezeit, sondern auch auf die Leistung aus und führt dazu, dass Benutzer mehr für den Zugriff auf Ihre Inhalte bezahlen.
  • Es ermöglicht mehr inhaltliche Freiheit: Anstatt nur auf SVG-ähnliche Inhalte beschränkt zu sein, würde es ermöglichen, dass dasselbe Format allgemeiner verwendet wird.
  • Es ist wahrscheinlich modularer: Dies ermöglicht eine einfachere Wiederverwendung in der Zukunft oder auf anderen Seiten.
  • Es ist einfacher zu bearbeiten: Anstatt jedes Mal in Illustrator zu gehen, wenn etwas geändert werden muss, können Sie einfach etwas zum HTML hinzufügen.
Danke! Ich untersuche diese Optionen. Da ich mit Polymer nicht vertraut bin, habe ich unter stackoverflow.com/questions/35067882/… eine Folgefrage gestellt .
@highsciguy Wenn eine Antwort Ihre Frage erfüllt, können Sie auf den Pfeil links neben der Antwort klicken, um sie als richtig zu markieren
Ich werde es nicht vergessen!
@highsciguy ich hoffe du hast es nicht vergessen :)
Animierte SVG-JavaScript-Infografik für die Zeitleiste
AntwortenHierDatenschutz-Bestimmungen1y, 0v