CODEWITHSUNDEEP
javascripthtmlraphael
Winterwind
Winterwind

Reputation: 117

RaphaelJS animation loop

I need help with adding a loop to my raphaelJS animation. The idea is to hit the button id="1" to rotate the purple square 120degrees. If you hit button id="2", the purple square will rotate 120degrees to the left instead.

I've accomplished to add the function which they both rotates, though the problem is that you can only click the order of, button id="1", button ID="2", 1, 2, , 1, 2, etc. To clarify, you can't rotate the blue square twice the same direction, you'll have to alternate between button 1/2. Second, you can't start with rotate left function. To be able to use rotate left you'll first have to rotate it to the right.

So what I need help with:

Be able to use the function multiple times.

To summarize the function:

By hitting the button, the purple square transforms by rotating 120degrees to the right.The animation timer is set to happen over 2 seconds. Adding a bounce effect to it.

Here is the rotate right function. The rotate left function is exactly the same except the transform part. And then I tried to solve this by adding ".repeat(Infinity)", but it had no effect.

//Turn right
    p.rect(10, 80, 50, 25)
    .attr({
        fill : "grey",
        "stroke-width" : 1
    }).click(function(){
    purpleRect.animate({
        transform : "r120",
    }, 2000, "bounce").repeat(Infinity);
});
};

The purple square itself:

window.onload = function(){

    var p = Raphael(0, 0, 240, 140);
    p.rect(0,0,240,70);

    var purpleRect = p.rect(10, 10, 50, 50)
    .attr({
        fill : "#aaaaff",
        "stroke-width" : 3
    });

Upvotes: 0

Views: 434

Answers (1)

Ian
Ian

Reputation: 13842

Somehow, you need to either store the rotation, or gather the rotation from the existing transform. Either way is possible, it may be a simpler mindset to just store the rotation in a data element. So the main bit would look like this...

Set up the initial rotation store...

SomeElement.data('rotation',0)

Then use this in your transform...

    p.rect(70, 80, 50, 25)
    .attr({
        fill : "grey",
        "stroke-width" : 1
    }).click(function a(){
        purpleRect.data('rotation', purpleRect.data('rotation') - 120);
        purpleRect.animate({
            transform : "r" + +purpleRect.data('rotation'),
    }, 2000, "bounce");
});

jsfiddle

Upvotes: 1

Related Questions