Jcanvas: Step function

Jochen

Was bringt step: function?

In dem folgenden Beispiel teste ich ob ich eine Animation unterbrechen kann. Ich lasse ein Rectangle über eine Erhöhung des X Wertes horizontal über den Bildschirm wandeln.

in step: function versuche ich ab einen bestimmten X Wert eine Veränderung herbei zu führen. Nichts passiert.

Was nutzt dann die Step funcion?

var x;

$('canvas').drawRect({

layer: true,

name:'myBox',

fillStyle: 'red',

x: 100, y: 100,

width: 100, height: 50

});

$('canvas').animateLayer('myBox', {

x: 400

}, {

duration: 3000,

easing: 'swing',

step: function (now, fx, layer) {

if (x>250){fillStyle="green";

aler("hallo"); }

},

complete: function (layer) {

$('canvas').setLayer('myBox', {

fillStyle: 'blue',

rotate: 30,

x: '+=10',

y: '-=10'

})

.drawLayers();

}

});

</script>

LG aus Portugal

Jochen

Sempervivum

Du warst auf dem richtigen Wege und die step-Funktion funktioniert. Das Problem war, dass Du innerhalb dieser Funktion nicht direkt auf x und fillStyle zugreifen kannst, sondern den Eingangsparameter layer zu Hilfe nehmen musst:

Code

$('canvas').animateLayer('myBox', {
                x: 400
            }, {
                    duration: 3000,
                    easing: 'swing',
                    step: function (now, fx, layer) {
                        if (layer.x > 250) {
                            layer.fillStyle = "green";
                            // aler("hallo");
                        }
                    },
                    complete: function (layer) {
                        $('canvas').setLayer('myBox', {
                            fillStyle: 'blue',
                            rotate: 30,
                            x: '+=10',
                            y: '-=10'
                        })
                        .drawLayers();

                }
            });

Alles anzeigen

Jcanvas: Step function

Jetzt mitmachen!

Tags