Kleine Animation mit mehreren Bildern

ButterKnecht · 26. Juli 2021

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.

Sempervivum · 26. Juli 2021

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.

ButterKnecht · 4. August 2021

Zitat von Sempervivum

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.

Sempervivum · 4. August 2021

Versuche dieses:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Demo Animation</title>

    <style>
        #ani-wrap {
            display: flex;
            /* Breite auf die der Einzelbilder setzen: */
            width: 270px;
            overflow: hidden;
        }

        #ani-wrap img {
            /* Verhindern, dass Mausaktionen auch auf die Bilder wirken: */
            pointer-events: none;
        }
    </style>
</head>

<body>
    <div id="ani-wrap">
        <img src="images/wellen-frames/frame1--wellen.png">
        <img src="images/wellen-frames/frame2--wellen.png">
        <img src="images/wellen-frames/frame3--wellen.png">
    </div>
    <script>
        const fps = 25,
            aniWrapper = document.getElementById('ani-wrap');
        // Gibt an, ob die Animation läuft:
        let aniRunning = false;
        function animateIt() {
            // Wir nehmen das letzte Bild und stellen es an den Anfang:
            aniWrapper.prepend(aniWrapper.lastElementChild);
            // Erneuten Aufruf der Funktion anfordern
            // wenn die Animation laufen soll:
            if (aniRunning) {
                requestAnimationFrame(animateIt);
            }
        }
        // Animation starten und stoppen mit Eventhandler
        // fuer Mouseover und Mouseout:
        aniWrapper.addEventListener('mouseover', event => {
            // Animation starten.
            aniRunning = true;
            animateIt();
        });
        aniWrapper.addEventListener('mouseout', event => {
            // Animation anhalten:
            aniRunning = false;
        });
    </script>
</body>

</html>

Alles anzeigen

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.

ButterKnecht · 4. August 2021

Danke schon mal. Haut nicht ganz hin. Es ist viel zu schnell. Er schein die FPS nicht zu beachten

Sempervivum · 4. August 2021

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:

Code

        const fps = 25,
            aniWrapper = document.getElementById('ani-wrap');
        // Gibt an, ob die Animation läuft:
        let aniRunning = false;
        function animateIt() {
            if (aniRunning) {
                // Wir nehmen das letzte Bild und stellen es an den Anfang:
                aniWrapper.prepend(aniWrapper.lastElementChild);
            }
        }
        // Funktion zyklisch ausführen:
        setInterval(animateIt, 1000 / fps);

        // Animation starten und stoppen mit Eventhandler
        // fuer Mouseover und Mouseout:
        aniWrapper.addEventListener('mouseover', event => {
            aniRunning = true;
        });
        aniWrapper.addEventListener('mouseout', event => {
            aniRunning = false;
        });

Alles anzeigen

Sempervivum · 5. August 2021

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.

ButterKnecht · 5. August 2021

Zitat von Sempervivum
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

ButterKnecht · 9. August 2021

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.

Sempervivum · 9. August 2021

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 ...

ButterKnecht · 9. August 2021

Zitat von Sempervivum

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

Sempervivum · 9. August 2021

Wenn Du das konsequent getan hast, sollte es auch so funktionieren. Wenn es das nicht tut, vermute ich, dass Du irgend wo nicht ganz konsequent warst mit den unterschiedlichen Variablen.

ButterKnecht · 9. August 2021

Code

const fps = 3,
            aniWrapperR = document.getElementById('ani-wrapR');
        // Gibt an, ob die Animation läuft:
        let aniRunningR = false;
        function animateItR() {
            if (aniRunningR) {
                // Wir nehmen das letzte Bild und stellen es an den Anfang:
                aniWrapperR.prepend(aniWrapperR.lastElementChild);
            }
        }
        // Funktion zyklisch ausführen:
        setInterval(animateItR, 1000 / fps);
        // Animation starten und stoppen mit Eventhandler
        // fuer Mouseover und Mouseout:
        aniWrapperR.addEventListener('mouseover', event => {
            aniRunningR = true;
        });
        aniWrapperR.addEventListener('mouseout', event => {
            aniRunningR = false;
        });

Alles anzeigen

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

Das andere sieht aus wie zuvor

Sempervivum · 9. August 2021

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:

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Demo Javascript Movie</title>

    <style>
        .ani-wrap {
            display: flex;
            overflow: hidden;
        }

        .ani-wrap img {
            pointer-events: none;
        }

        #ani-wrap-1 {
            /* Die Breite der Einzelbilder: */
            width: 270px;
        }

        #ani-wrap-2 {
            /* Die Breite der Einzelbilder: */
            width: 800px;
        }
    </style>
</head>

<body>
    <div id="ani-wrap-1" class="ani-wrap">
        <img src="_HP-Subdomain/images/wellen-frames/frame1--wellen.png">
        <img src="_HP-Subdomain/images/wellen-frames/frame2--wellen.png">
        <img src="_HP-Subdomain/images/wellen-frames/frame3--wellen.png">
    </div>
    <div id="ani-wrap-2" class="ani-wrap">
        <img src="_HP-Subdomain/images/bild1.jpg">
        <img src="_HP-Subdomain/images/bild2.jpg">
        <img src="_HP-Subdomain/images/bild3.jpg">
    </div>
    <script>
        function animate(idWrapper, fps) {
            const aniWrapper = document.getElementById(idWrapper);
            // Gibt an, ob die Animation läuft:
            let aniRunning = false;
            function animateIt() {
                if (aniRunning) {
                    // Wir nehmen das letzte Bild und stellen es an den Anfang:
                    aniWrapper.prepend(aniWrapper.lastChild);
                }
            }
            // Funktion zyklisch ausführen:
            setInterval(animateIt, 1000 / fps);

            // Animation starten und stoppen mit Eventhandler
            // fuer Mouseover und Mouseout:
            aniWrapper.addEventListener('mouseover', event => {
                aniRunning = true;
            });
            aniWrapper.addEventListener('mouseout', event => {
                aniRunning = false;
            });

        }
        animate('ani-wrap-1', 25);
        animate('ani-wrap-2', 3);
    </script>
</body>

</html>

Alles anzeigen

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.

ButterKnecht · 9. August 2021

Danke ich werde es gleich testen. Was möchtest du austesten?

Sempervivum · 9. August 2021

Zitat

Was möchtest du austesten?

Warum deine Version mit den "R" dahinter nicht funktioniert. Habe ich inzwischen getan und sie läuft einwandfrei.

ButterKnecht · 9. August 2021

Zitat von Sempervivum

Warum deine Version mit den "R" dahinter nicht funktioniert. Habe ich inzwischen getan und sie läuft einwandfrei.

Du bist ein Fuchs! Dein Skript geht. Meins nicht...

dorazop · 23. Oktober 2021

Haut es nicht ganz. Es ist viel zu schnell. Er scheint nicht auf die FPS zu achten techzpod mobdro

Kleine Animation mit mehreren Bildern

Jetzt mitmachen!

Teilen