Anfänger braucht Hilfe beim animieren von einem Onlineschema
  • juri November 2015
    Hallo zusammen,
    ich bin der Neue. Heiße Uwe und beschäftige mich mit dem erstellen einer Onlinegrafik für eine Solaranlage.
    Darstellung von Pumpen und Ventilen animiert ist mir auch ganz gut gelungen.
    Nun wollte ich ganz gern noch die Leitungen animieren. Es gibt also rote und blaue gestrichelte Leitungen. Bei laufender Pumpe sollten diese Leitungen dann "laufen". Ich habe bereits einmal so etwasgesehn, leider meldet sich der gute Mann nicht.
    Könnte ihr mir helfen?

    Gruß
    Uwe
  • Moini November 2015
    Moin Uwe,

    welche Technik verwendest Du denn zum Animieren? Javascript? SMIL? CSS-Animationen? Ein bestimmtes Programm? (...Flash?!...)

    Hast Du eine Beispieldatei?

    Viele Grüße,
     Moini
  • juri November 2015
    Ich habe mal zwei Dateien angehängt.
    das Schema(kollektoren) ist ist bei mir Online. Die Steuerbefehle bekommt die svg über eine sql.
    Die zeite Datei habe ich gefunden und zeigt was ich eigentlich erreichen wollte. Leider ist die Datei so geschrieben das ich es nicht auf mein Schema anwenden kann. Da fehlt mir einfach das Wissen.

    OK, bekomme die Dateien nich hoch geladen. dann eben so:
    http://brundu.hopto.org/beispiel/kollektoren.svg
    http://brundu.hopto.org/beispiel/heizkreis.svg

  • tobiastobias November 2015
    Die zweite Datei animiert das SVG ja mit einem JavaScript. Ich hab da vor einiger Zeit (vor 5 Jahren sehe ich gerade) mal mit experimentiert und drei einfache Beispiele erstellt:
    http://dablogter.blogspot.de/2010/06/svg-animationen-fortschrittsbalken.html

    Insgesamt fand ich es schon etwas umständlich aber vielleicht hilft es dir.
  • tobiastobias November 2015
    Und hier noch ein interessanter Blogeintrag, mit guten weiter Links:
    http://jimmac.musichall.cz/blog/2015-10-13-svg-animation/
  • juri November 2015
    Nee nee,
    die wird nicht mit einem JavaSkript animiert.
    Die wird über AnimatePath animiert.
    Ich habe jetzt mal die Leitungen mittels knoten gruppiert. Denke das ist der Anfang.
    Aber wie geht es weiter?
  • tobiastobias November 2015
    Doch sicher wird die mit JavaScript (ecmascript) animiert. Wenn ich aus der heizkreis.svg den script Bereich raus lösche bewegt sich nichts mehr.
  • juri November 2015
    oh, ecmascript kannte ich noch nicht.
    Bin halt noch ziemlich frisch auf dem Gebiet.

  • Moini November 2015
    Für die Inkscape-Webseite haben wir auch einen Artikel über Animationen zusammengestellt (auf Deutsch verfügbar). Er eignet sich ganz gut als Einführung in das Thema.

    Der enthält auch noch eine Menge nützlicher Links, leider erfordern alle davon gute bis sehr gute Englischkenntnisse:

    https://inkscape.org/de/lernen/animation/



  • Moini November 2015
    (sieht für mich so aus, als ob stroke-dashoffset die animierte Eigenschaft wäre)
  • juri November 2015
    So habe mich jetzt mal ein wenig eingelesen.
    Das Script ist/war in der svg eingebettet.
    Das habe ich auch gefunden. Nun habe ich hin und her probiert. Keine Chance, ich bin zu blöd dazu.
    Dann vielleich nochmal jemand drüberschauen und es mit Worten für einen DAU erklären?

  • Moini November 2015
    Uwe, ich finde es ist in einem Forum etwas schwierig, jemandem Javascript, CSS und SVG neu beizubringen :(

    Eine Erklärung 'von Anfang an' dazu würde vermutlich ein ganzes Weilchen dauern und hier mehrere Seiten füllen.

    Wenn Du ein ganz konkretes Problem hast, dann formuliere dazu eine Frage - ansonsten musst Du Dir leider erstmal die Grundlagen der Animation mit Javascript selbst anschauen und soweit kommen, dass Du eine konkrete Frage stellen kannst - oder Du findest jemanden, der das Bild für Dich macht.

    Ansonsten hier ein paar Mini-Tipps:
    - Die CSS-Klassen werden oben definiert. Du musst sie nutzen.
    - in init wird gesagt, was passieren soll, sobald das Dokument geladen ist: Es sollen Animationen zu den Elementen hinzugefügt werden.
    - Die Funktion addAnimatePath sorgt dafür, dass der Pfad animiert werden kann. Du musst sie entsprechend befüttern.
    - Die onclick und onmouseover geben an, was beim Draufklicken / Drüberfahren mit der Maus passieren soll.

Hey Fremder!

Sieht so aus als wenn du neu hier bist. Wenn du mitmachen willst, drücke einen dieser Buttons!

In dieser Diskussion