explosion

Jofre

Erfahrenes Mitglied
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
 
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

  • ballon1.PNG
    ballon1.PNG
    10,3 KB · Aufrufe: 4
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.
 
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;
        }
 
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
 
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.
 
Zurück