Anzeige

explosion

#1
hallo

kennt jemand eine javascrit Funktion die eine Explosion simuliert?

Ich habe Ballons, die, wenn sie angeklickt werden, verschwinden.
Im selben Moment möchte ich eine Simulation einer Explosion bringen.
Ich habe nichts bisher gefunden. Aber vielleicht kennt einer eine solche Funktion.


Ein schönes Wochendende

Joachim
 
#3
Sind oval. Vielleicht müsste ich bei der Erstellung das Bild in 4 -8 Teile zerlegen und hier wieder zusammen "kleben"?
Dann könnte man es kreisförmig auseinanderfliegen lassen . Oder?
 

Anhänge

Sempervivum

Erfahrenes Mitglied
#5
Für eine realistische Darstellung sind 4 bis 8 Teile vielleicht zu wenig. Um es nicht manuell machen zu müssen, könnten wir uns einen Algorithmus überlegen, um das Bild automatisch durch Javascript zu zerlegen.
 

Sempervivum

Erfahrenes Mitglied
#7
Probiere mal dies aus:
Javascript:
        var j = 0, angle = 0;
        var rad = Math.PI / 12;
        var deltarad = rad * 2;
        for (let i = 0; i < 12; i++) {
            $('canvas').drawSlice({
                groups: ['ballon-' + j + '-' + i],
                layer: true,
                // fromCenter: true,
                // fillStyle: '#36b',
                x: 150, y: 100,
                radius: 50,
                start: angle, end: angle + 30,
                mask: true
            })
                // This layer is being masked
                .drawImage({
                    groups: ['ballon-' + j + '-' + i],
                    layer: true,
                    source: 'images/ballon.jpg',
                    x: 150, y: 150
                })
                // Restore layer mask
                .restoreCanvas({
                    layer: true
                });
            $('canvas').animateLayerGroup(('ballon-' + j + '-' + i), {
                x: 150 + 1000 * Math.sin(rad),
                y: -(150 + 1000 * Math.cos(rad))
            }, 2000);
            angle += 30;
            rad += deltarad;
        }
 
#8
Warum arbeitest du bei den Ballons mit group
Ich habe die Ballons in ein Array gepackt.
bal="ballon"+i+ ".png";
Ich verstehe auch nicht
groups: ['ballon-' + j + '-' + i],

Es grüßt mal wieder

Rudi Ratlos
 

Sempervivum

Erfahrenes Mitglied
#9
Warum arbeitest du bei den Ballons mit group
Um solch ein Tortenstück zu erzeugen braucht man das Bild und eine Maske (einSlice). Da beides zusammen gehört und zusammen animiert werden muss, habe ich sie zu einer Gruppe zusammen gefasst.

Ich habe die Ballons in ein Array gepackt.
bal="ballon"+i+ ".png";
An dieser Stelle musst Du eher den Index j verwenden, denn der bezieht sich auf den Ballon.

Ich verstehe auch nicht
groups: ['ballon-' + j + '-' + i]
Die Gruppe muss einen eindeutigen Namen haben, über den man sie ansprechen kann, z. B. später beim Animieren.
j = Index bzw. Nummer des Ballons
i = Index bzw. Nummer des Tortenstücks.
 
#11
Ich habe noch eine Alternative gefunden. ein Jquery plugin. Damit kann man Bilder explodieren lassen.

https://www.jqueryscript.net/animation/Create-An-Image-Explosion-Effect-In-jQuery-imgexplode-js.html

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>
<script src="jquery.imgexplode.js"></script>

<title>Move to Click Position</title>
<style type="text/css">
#myCanvas {
position: absolute;
top: 0px;
left: 0px;
border: 1px red solid;
background-color : #FFEFDB;
}
</style>
</head>
<body>
<canvas id="myCanvas" width="500" height="400" >
Your browser does not support the HTML5 canvas tag.
</canvas>
<script>

function explode() {
$("ballon0.png").explodeRestore();
setTimeout(function () {
$("ballon0.png").explode({
maxWidth: 12,
minWidth: 3,
radius: 331,
release: false,
recycle: false,
explodeTime: 400,
canvas: true,
maxAngle: 360,
gravity:false,
});
}, 300)
}
explode();
</script>
</body>
</html>
Auf der Webseite funktioniert es. Hier kommen 2 Fehlermeldung
Laden fehlgeschlagen und Type error
 

Sempervivum

Erfahrenes Mitglied
#12
Da ist ein wesentlicher Fehler: Du musst ein im-Tag anlegen und dessen Selektor als Parameter an $ übergeben, nicht die URL des Bildes. So funktioniert es:
Code:
<!DOCTYPE html>
<html>

<head>
    <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jcanvas/21.0.0/jcanvas.js"></script>
    <script src="js/jquery.imgexplode.min.js"></script>

    <title>Move to Click Position</title>
    <style type="text/css">
        body {
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>

<body>
<img id="ballon" src="images/ballon2.jpg">    <script>

        function explode() {
            $("#ballon").explodeRestore();
            setTimeout(function () {
                $("#ballon").explode({
                    maxWidth: 12,
                    minWidth: 3,
                    radius: 331,
                    release: false,
                    recycle: false,
                    explodeTime: 400,
                    canvas: true,
                    maxAngle: 360,
                    gravity: false,
                });
            }, 300)
        }
        explode();
    </script>
</body>

</html>
Damit es gut aussieht, musste ich den Ballon isolieren und die Schnur wegnehmen, siehe Anhang. ballon2.jpg
 
#13
Neue html Datei angelegt.
Dein Script rein geladen
Fehlermeldung

Laden fehlgeschlagen für das <script> mit der Quelle "file:///C:/xampp/htdocs/js/jquery.imgexplode.min.js".

Verstehe Bahnhof
 

Sempervivum

Erfahrenes Mitglied
#14
Du musst den Pfad für die JS-Datei anpassen, denn Du hast diese offenbar im selben Verzeichnis wie die HTML-Datei:
<script src="jquery.imgexplode.js"></script>
d. h. so wie in deinem ursprünglichen Pfad. Überprüfe auch Pfad und Dateiname der Bilddatei.
 
#15
Sehr schön. Klappt. Dank dir!

It's been a hard day's night
And I've been working like a dog
It's been a hard day's night
I should be sleeping like a log
 
#16
Wenn ich diesen Code in das Programm einbringe bekomme ich die Meldung

TypeError: $(...).explodeRestore is not a function[Weitere Informationen]
 
#19
Irgendwie sind für mich das Plugin explosion und jcanvas nicht kompatibel
bei exploision arbeite ich mit img.tag und bei jvanvas mit
layer. Zwei Welten?
 

Sempervivum

Erfahrenes Mitglied
#20
Das sind allerdings zwei Welten. Wenn Du dieses Plugin benutzen willst, musst Du einen Eventlistener in jCanvas für den Click registrieren. Darin kannst Du die x- und y-Position des Ballons auslesen und ein zweites Bild mit einem img-Tag auf dem selben Ort über dem Canvas positionieren.
 
Anzeige
Anzeige