Jcanvas: Dynamisch scalieren

[Jofre]

Ich erzeuge mit dem beiliegenden Code vertical fliegende Kreise.
Guten Morgen,

kann man bei Kreisen (siehe Code) während der "Flug Animation" noch dynamisch die Größe ändern,
von 0 auf 100% der Größe.
Ich möchte damit erreichen, dass die Kreise langsam erscheinen.

Ich habe es versucht indem ich in die Animation eine Funktion einbaue.
Aber es passiert nichts:

var myVar = setInterval(Flieg, 1000);
var j = 0;
function Flieg() {
$('canvas').drawArc({
layer: true,
name: 'myBox' + j,
fillStyle: '#' + Math.floor(Math.random() * 16777215).toString(16),
x: Math.floor(Math.random() * 300) + 100,
y: 400,

radius:50,
click: function (layer) {
layer.fillStyle = 'blue';
}
});
$('canvas').animateLayer('myBox' + j, {
y: -80

}, {
duration: 4000,
easing: 'linear',
radius: function(layer) {
if (y<200) {radius=10}
else {radius=100}
},
});
j++
}
Wahrscheinlich Unsinn

Irgendeine Idee?

Man könnte es auch mit Opacity versuchen. Aber auch das müsste dynamisch eerfogen Von unsichtbar auf 100% Erscheinung

LG

Joachim

 

[Sempervivum]

Erst dachte ich daran, die Callback-Funktion der Animation zu verwenden, aber es geht einfacher, wenn man den Radius ebenfalls animiert:

        var myVar = setInterval(Flieg, 2000);
        var j = 0;
        var duration = 10000;
        var r = 40, w = 2 * r, h = 4 * r;
        function Flieg() {
            var xPos = Math.floor(Math.random() * 600) + 100;
            $('canvas').drawEllipse({
                layer: true,
                groups: ['group-' + j],
                name: 'myBox-' + j + '-outer',
                // fillStyle: 'rgba(0, 0, 0, 0)',
                fillStyle: 'lightgrey',
                x: xPos,
                y: 400,
                width: w,
                height: h,
                fromCenter: true,
                click: onclick
            }).drawArc({
                layer: true,
                groups: ['group-' + j],
                name: 'myBox-' + j,
                fillStyle: '#' + Math.floor(Math.random() * 16777215).toString(16),
                x: xPos,
                y: 400,
                radius: 0,
                fromCenter: true,
                click: onclick
            }).animateLayer('myBox-' + j, {
                radius: r,
                y: -2 * r
            }, duration).animateLayer('myBox-' + j + '-outer', {
                y: -2 * r
            }, duration);
            j++;
            function onclick(layer) {
                var j = layer.name.split("-")[1];
                console.log(j);
                $('canvas').setLayer('myBox-' + j, {
                    fillStyle: 'blue'
                });
            }
        }

Leider funktionierte dabei die Animation über die Gruppe nicht mehr, so dass ich beide Kreise einzeln animieren musste.

 

[Jofre]

Toll

Ich habe radius durch opacity ersetztda ich Ballons als Bilder fliegen lasse. Sie tauchen dann so langsam aus dem Dunkeln auf.

Danke. Wieder viel gelernt