Jcanvas: Dynamisch scalieren


Jofre

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

Erfahrenes Mitglied
Erst dachte ich daran, die Callback-Funktion der Animation zu verwenden, aber es geht einfacher, wenn man den Radius ebenfalls animiert:
Code:
        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

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

Forum-Statistiken

Themen
272.355
Beiträge
1.558.612
Mitglieder
187.829
Neuestes Mitglied
AlDi31