Raphael reset einer Animation

fankuin

Grünschnabel
Hallo,
bin ja neu, hab aber gleich schon ne technische Frage:

http://jsfiddle.net/zewGT/

Code:
var paper = Raphael("canvas", 540, 380);

var flower5 = paper.path("M 287.40799 256.86381 l 0 -0").click(function () {
    flower5.rotb();
});


Raphael.el.red = function () {
    this.attr({
        fill: "#f0f0d1",
        stroke: "#49687a",
            "stroke-width": 37,
            'stroke-linecap': "round",
            "stroke-linejoin": "miter",
            "stroke-miterlimit": 4, 
            "opacity": 1
    });
};


flower5.attr( { "path" : "M 287.40799 256.86381 l 0 -0"});

Raphael.el.rotb = function () {

    this.animate({
        transform: "r1200"
    }, 1000, 'bounce').click(function () {
        this.rot();
      
    });

};
Raphael.el.rot = function () {

    this.animate({
        transform: "r0"
    }, 4000, 'linear').click( function () {
        this.rotb();
    }); 
};

    var flower5 = paper.path("M 487.40799 356.86381 l 0 -0").click(function () {
        flower5.rotb();
    });

flower5.animate({
    path: "m 287.40799,156.86381 c 11.84732,66.09068 16.18994,128.7973 66.46299,130.71239 58.90325,3.33986 103.31709,-79.31366 74.08256,-124.48479 -34.01029,-33.4359 -90.16186,-13.14165 -140.54555,-6.2276 z"
}, 400, 'ease-out').red();

Eigentlich soll das Teil bei Klick sich drehen. Bei erneuten Klicken sich zurückdrehen. Um dann wieder von vorne zu beginnen.
Aber ich verstehe den Output nicht (bei jsfiddle zu begutachten)

Liegt es an der Callbackfunction? Oder muss ich das über element.node.onclick machen? (hatte ich auch schon versucht, da hab ich keine Wiederholung bekommen

Gruss,
fankuin


P.S. Danke, hab die Lösung gefunden. Manchmal lohnt es sich Scriptteile gesondert zu testen, um nicht die Übersicht zu verlieren.

P.P.S Wenn jemand gute tutorials oder weitere Beispiele für Raphael kennt, darf diese trotzdem hier gerne posten :)
 
Zuletzt bearbeitet:
Zurück