Multiple Animation Jcanvas

[Jofre]

Hallo,

ich möchte vom unteren Canvas Rand Ballons (hilfsweise Rechtecke) in verschiedenen Farben aufsteigen lassen. Ich habe es mit der Animation von Jcanvas erfolglos versucht. Wie könnte die Lösungsidee aussehen?

MfG

Joachim)

(Jofre)

 

[basti1012]

Ist zwar kein Canvas ,aber vieleicht kannst du es trotzdem gebrauchen.
Ist mit css und etwas jquery gemacht
http://sebastian1012.bplaced.net/homepagebasti1012/forumscripte_juni2018/fligene_divs.php
So wie es jetzt ist wirst du wohl niemals den gleichen Ballon ( Rechteck ) Sehen jedesmal eine neue grösse und neue Farbe. Aber das kann man sich ja selber zusammen fummeln fals du es gebrauchen kannst.Ansonsten warte noch etwas bis die Canvas Profi online sind.

EDIT :Habe aus den Rechtecks jetzt Ballons gemacht,so sieht es nach deinen wünschen schon besser aus hoffe ich

 

[Jofre]

Danke dir Basti,
interessanter Ansatz. Aber ich möchte es in Canvas bzw. in Jcanvas realisieren. Es ist eleganter und für eine weitere Verarbeitung übersichtlicher.
Also warte ich jetzt auf die Canvas Profis.

Dank dir

Joachim

 

[Sempervivum]

Hallo Joachim,
woran scheitert es denn? Einen Kreis mit jCanvas zu zeichnen ist ja kein Problem und bei diesem musst Du dann nur die y-Position animieren, damit er nach oben fliegt. Und dann brauchst Du die Zufallsfunktion Math.random() um die x-Position, die Farbe und den Zeitpunkt des Losfliegens festzulegen.
Beste Grüße - Ulrich

 

[Jofre]

Danke dir Basti,
interessanter Ansatz. Aber ich möchte es in Canvas bzw. in Jcanvas realisieren. Es ist eleganter und für eine weitere Verarbeitung übersichtlicher.
Also warte ich jetzt auf die Canvas Profis.

Dank dir

Joachim

Danke dir Basti,
interessanter Ansatz. Aber ich möchte es in Canvas bzw. in Jcanvas realisieren. Es ist eleganter und für eine weitere Verarbeitung übersichtlicher.
Also warte ich jetzt auf die Canvas Profis.

Dank dir

Joachim

Hallo Joachim,
woran scheitert es denn? Einen Kreis mit jCanvas zu zeichnen ist ja kein Problem und bei diesem musst Du dann nur die y-Position animieren, damit er nach oben fliegt. Und dann brauchst Du die Zufallsfunktion Math.random() um die x-Position, die Farbe und den Zeitpunkt des Losfliegens festzulegen.
Beste Grüße - Ulrich

Guten Morgen Ulrich,

Hallo Joachim,
woran scheitert es denn? Einen Kreis mit jCanvas zu zeichnen ist ja kein Problem und bei diesem musst Du dann nur die y-Position animieren, damit er nach oben fliegt. Und dann brauchst Du die Zufallsfunktion Math.random() um die x-Position, die Farbe und den Zeitpunkt des Losfliegens festzulegen.
Beste Grüße - Ulrich

Hallo Joachim,
woran scheitert es denn? Einen Kreis mit jCanvas zu zeichnen ist ja kein Problem und bei diesem musst Du dann nur die y-Position animieren, damit er nach oben fliegt. Und dann brauchst Du die Zufallsfunktion Math.random() um die x-Position, die Farbe und den Zeitpunkt des Losfliegens festzulegen.
Beste Grüße - Ulrich

Hallo Joachim,
woran scheitert es denn? Einen Kreis mit jCanvas zu zeichnen ist ja kein Problem und bei diesem musst Du dann nur die y-Position animieren, damit er nach oben fliegt. Und dann brauchst Du die Zufallsfunktion Math.random() um die x-Position, die Farbe und den Zeitpunkt des Losfliegens festzulegen.
Beste Grüße - Ulrich

Joachim

 

[Jofre]

Guten Morgen Ulrich,
einen einzelnen Kreis zu animieren ist nicht das Problem. Ich bekomme es nicht hin gleichzeitig - oder fast gleichzeitig - 10 oder 20 Kreise zu starten und fliegen zu lassen. Wahrscheinlich muss ich hier eine for Anweisung mit dem Timer kombinieren. Aber wie?

Dann muss ich auch irgendwie die Kreise kontrollieren können, weil ich möchte, dass der User alle roten Kreise z. B. anklickt und dafür Punkte erhält. Das bekomme ich - so glaube ich hin - wenn ich die Kreise mit let erzeuge und über das click event in einer Schleife die Treffer ermittel oder?
Ich frage lieber was der beste Weg ist bevor ich wieder tagelang mit trial and error vor robbe.

LG
Joachim

Danke dir Basti,
interessanter Ansatz. Aber ich möchte es in Canvas bzw. in Jcanvas realisieren. Es ist eleganter und für eine weitere Verarbeitung übersichtlicher.
Also warte ich jetzt auf die Canvas Profis.

Dank dir

Joachim


Guten Morgen Ulrich,








Joachim

 

[Jofre]

Entschuldigt das Durcheinander . Bin noch Grünschnabel

 

[Sempervivum]

Ich bekomme es nicht hin gleichzeitig - oder fast gleichzeitig - 10 oder 20 Kreise zu starten und fliegen zu lassen. Wahrscheinlich muss ich hier eine for Anweisung mit dem Timer kombinieren.

Ah so, ich dachte zunächst, sie sollen zeitlich versetzt losfliegen. Wenn sie es gleichzeitig tun sollen, ist es viel einfacher, weil Du eine for-Schleife verwenden kannst und keine Timer brauchst.

 

[Jofre]

Leicht gesagt schwer getan.

Hier macht er nicht was er soll:
for (i=1;i<3;i++){
$('canvas').drawRect({
layer: true,
name: 'myBox',
fillStyle: '#36c',
x: 50+ i*100, y: 50,
width: 20, height: 20
});

$('canvas')
.animateLayer('myBox', {
x: 50+i*100, y: 150+ i *50,
}, 1000, function(layer) {


});
}

Ah so, ich dachte zunächst, sie sollen zeitlich versetzt losfliegen. Wenn sie es gleichzeitig tun sollen, ist es viel einfacher, weil Du eine for-Schleife verwenden kannst und keine Timer brauchst.

Bin etwas schusselig heute ( zu warm)

Hier der richtige Code

var myVar = setInterval(myTimer, 1000);
function myTimer() {
Flieg();
}


function Flieg()
{
for (let i=1;i<10;i++){
$('canvas').drawRect({
layer: true,
name: 'myBox'+i,
fillStyle: '#36c',
x: 50+ i*100, y: 400,
width: 20, height: 20
});

$('canvas')
.animateLayer('myBox'+i, {
x: 50+i*100, y: 10,
}, 100, function(layer) {


});
}

}
Er läuft nur einmal durch.

Wenn er jetzt durchläüft bis er über clearInterval gestopt wird dann sind eine Menge Rechtecke auf dem Schirm.
Wie kann ich dann einem einzelnen Rechteck eine individuelle ID geben

 

[Sempervivum]

Er läuft nur einmal durch.

Der Grund ist offenbar, dass Du die IDs bzw. die name-Eigenschaften doppelt vergibst, denn bei jedem Zyklus fängt er ja wieder mit 1 an. Abhilfe, indem Du den Index immer weiter zählst, etwa so:

        var myVar = setInterval(Flieg, 3000);
        var j = 0;
        function Flieg() {
            for (let i = 1; i <= 10; i++) {
                $('canvas').drawArc({
                    layer: true,
                    name: 'myBox' + j,
                    fillStyle: '#36c',
                    x: 50 + i * 30, y: 400,
                    radius: 10
                });

                $('canvas')
                    .animateLayer('myBox' + j, {
                        y: 10,
                    }, 2000, function (layer) {
                    });
                j++
            }

        }

Schöner würde ich es allerdings finden, wenn die Ballons gestaffelt losfliegen würden und nicht ein ganzer Block auf einmal. So wie ich es anfangs verstanden hatte.