Kleine Animation mit mehreren Bildern

  • Hi.


    Ich habe auf meiner Seite ein Bild von einem Spiele Automaten. Wenn ich mit der Maus darüber fahre (Hover) möchte ich das mindestens 3 Bilder hintereinander endlos ablaufen(bis die Maus wieder weggeht) so das eine kleine Animation entsteht. Ich weiß das dass ganze auch über GIF möglich ist. Aber da ist mir erstens die Qualität zu gering und ich glaube ein Hover Effekt ist nicht möglich.


    Konkretes Beispiel:

    Im Automaten steht ein Männchen und sobald ich mit der Maus darüber fahre, läuft das Männchen los und stopt sobald die Maus wieder weg ist.

  • Da gibt es recht viele Möglichkeiten, wie man so etwas realisieren kann. Ein Beispiel:

    Die Bilder nebeneinander in einem Container anordnen und durch overflow: hidden; dafür sorgen, dass immer nur das erste sichtbar ist.

    Eine Funktion zyklisch aufrufen, entweder durch setInterval oder requestAnimationFrame.

    In dieser Funktion das letzte Bild nehmen und an den Anfang stellen.

  • Da gibt es recht viele Möglichkeiten, wie man so etwas realisieren kann. Ein Beispiel:

    Die Bilder nebeneinander in einem Container anordnen und durch overflow: hidden; dafür sorgen, dass immer nur das erste sichtbar ist.

    Eine Funktion zyklisch aufrufen, entweder durch setInterval oder requestAnimationFrame.

    In dieser Funktion das letzte Bild nehmen und an den Anfang stellen.

    Irgendwie kriege ich das nicht gebacken. Hast du ein Beispiel parat.

  • Versuche dieses:

    Getestet habe ich es mit 66 Frames, die ich zur Hand hatte.

    Verbesserungsmöglichkeiten, die ich zunächst heraus gelassen habe, um es einfach zu halten:

    • Die Abmessungen der Bilder automatisch auslesen.
    • Das HTML für die Bilder automatisch erzeugen.
  • Die fps stammen von einer Version mit setInterval. Wenn Du eine geringe fps hast eignet sich diese besser, denn wenn man requestAnimationFrame umstellt wird es wieder komplizierter. Versuche dies Javascript:

  • In beiden Codes von mir ist noch ein Fehler: Man muss lastElementChild statt lastChild benutzen weil sonst leere Textknoten mit berücksichtigt werden:

    Code
    aniWrapper.prepend(aniWrapper.lastElementChild);

    Ich habe es oben geändert.

  • In beiden Codes von mir ist noch ein Fehler: Man muss lastElementChild statt lastChild benutzen weil sonst leere Textknoten mit berücksichtigt werden:

    Code
    aniWrapper.prepend(aniWrapper.lastElementChild);

    Ich habe es oben geändert.

    Vielen Dank. Funktioniert bestenss

  • Jetzt ist mir doch noch ein Fehler aufgefallen. Für einen Automaten funktioniert das ganze. Wenn ich jetzt einen weiteren hinzufüge mit anderen Bildern für die Animation funktioniert nur der erste. Auch wenn ich alle Variablen für das Skript anpasse und nach einem anderen ElementID suche.

  • Das ist nicht verwunderlich, weil ich den Fall, dass es mehrere Automaten gibt, nicht berücksichtigt habe. Dürfte aber kein Problem sein, das zu erweitern, ich sehe es mir an ...

    Also es soll 3 geben. Aber warum stört ihn das auch wenn ich unterschiedliche Variablen nutze!? Danke schon mal

  • So sieht es bis jetzt bei mir aus. Und das alles in einem separatem Skript.

    Das andere sieht aus wie zuvor

  • Das ist ja relativ übersichtlich und sollte eigentlich funktionieren. Wenn Du wissen willst, warum nicht, werde ich es mal austesten.


    In der Zwischenzeit habe ich das jedoch in eine Funktion gepackt, so dass der Code nicht vervielfacht werden muss:

    Wie du siehst, habe ich die fps als Parameter übergeben, so dass sie für jede Animation anders sein kann. Ich habe es mit 66 Frames und 25 fps und 3 Frames und 3 fps getestet.

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!