Multiple Animation Jcanvas

Jofre

Erfahrenes Mitglied
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)
 
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
 
Zuletzt bearbeitet:
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
 
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
 
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
 
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.
 
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
 
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:
Javascript:
        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.
 
Zurück