How to change the size of an animated circle onclick using raphael js

Question

I've got a animated circle which looks like this:

the blue part counts down, so for example from full to nothing in 10 seconds. The orange circle is just a circle. But I want that the circle will be smaller when you click on it. So i made an onclick event for the circle.

circleDraw.node.onclick = function () {
            circleDraw.animate({
            stroke: "#E0B6B2",
            arc: [100, 100, 100, 100, 100]
             }, 500);
            circleDraw.toFront();

};

That works, i've made it for both of the circles, they both become smaller but, After the 500 mili seconds the blue circle becomes big again because the timer for the blue circle got the parameters that it should be bigger.

circleDraw.animate({
    arc: [100, 100, 0, 100, 500]
}, 10000);

Because the blue circle counts for 10 seconds it becomes automatically bigger again. How do I make both circles smaller but keep the timer counting down?

I was thinking of stopping the animation for the blue circle and save the remaining mili seconds of the animation draw it again smaller and start the animation again with the remaining seconds, but I don't know how to do this. But maybe i'm looking in the wrong direction and do I have to make it different.

Thanks.

All my code:

 /************************************************************************/
/* Raphael JS magic
 *************************************************************************/
var drawTheCircleVector = function(xloc, yloc, value, total, R) {
        var alpha = 360 / total * value,
            a = (90 - alpha) * Math.PI / 180,
            x = xloc + R * Math.cos(a),
            y = yloc - R * Math.sin(a),
            path;
        if (total == value) {
            path = [
                ["M", xloc, yloc - R],
                ["A", R, R, 0, 1, 1, xloc - 0.01, yloc - R]
            ];
        } else {
            path = [
                ["M", xloc, yloc - R],
                ["A", R, R, 0, +(alpha > 180), 1, x, y]
            ];
        }
        return {
            path: path
        };
    }; /************************************************************************/
/* Make the circles
 *************************************************************************/
var timerCircle = Raphael("timer", 320, 320);
var circleBg = Raphael("backgroundCircle", 320, 320);
timerCircle.customAttributes.arc = drawTheCircleVector
circleBg.customAttributes.arc = drawTheCircleVector 

/************************************************************************/
/* draw the circles
 *************************************************************************/
var drawMe = circleBg.path().attr({
    "fill": "#FF7F66",
    "stroke": 0,
    arc: [160, 160, 100, 100, 140]
});
var clickOnes = true;
drawMe.node.onclick = function() {
    if (clickOnes == true) {
        circleDraw.animate({
            arc: [100, 100, 0, 100, 100]
        }, 500);
        circleDraw.toFront();
        drawMe.animate({
            arc: [100, 100, 100, 100, 100]
        }, 500);
        circleDraw.toFront();
        clickOnes = false;
    } else {
        circleDraw.animate({
            arc: [160, 160, 0, 100, 150]
        }, 500);
        circleDraw.toFront();
        drawMe.animate({
            arc: [160, 160, 100, 100, 140]
        }, 500);
        circleDraw.toFront();
        clickOnes = true;
    }
};
// arc: [Xposition, Yposition, how much 1 = begin 100 = end, ? = 100, 150];
 /************************************************************************/
/* Draw the circle
 *************************************************************************/

    var circleDraw = timerCircle.path().attr({
        "stroke": "#2185C5",
        "stroke-width": 10,
        arc: [160, 160, 100, 100, 150]
    });

    circleDraw.animate({
        arc: [160, 160, 0, 100, 150]
    }, 9000);



    window.setInterval(function() {
        goToNextStopGardensPointBus210()
    }, 9000);

Here is my code the timer works and if you click on the circle it will become smaller but if you click on it before the bue cirlce is done it will become big again.

UPDATE working version of what I got on jsFiddle, http://jsfiddle.net/hgwd92/2S4Dm/

Answer 1

Here's a fiddle for you..

The issue was you where redrawing the items, with new animation speeds and such. Using the transform function, you can add a scaling transform that acts independent of the draws.

circleDraw.animate({transform: 'S0.5,0.5,160,160', 'stroke-width': 5}, 500);

and then to set it back...

circleDraw.animate({transform: 'S1,1,160,160', 'stroke-width': 10}, 500);

Note you need to set the center for the blue arc (the 160, 160), or once it gets past half way the center of the arc will move and it will scale to a different position.

EDIT: Updated the fiddle and code to scale the blue line to so it looks better.