Как изменить размер анимированного круга по клику с помощью Raphael JS

Question

У меня есть анимированный круг, который выглядит так:

синяя часть ведет обратный отсчет, например, от полного до нуля за 10 секунд. Оранжевый круг - это просто круг. Но я хочу, чтобы при щелчке на нем круг становился меньше. Так что я сделал событие для круга.

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

};

Это работает, я сделал это для обоих кругов, они оба становятся меньше, но после 500 миль синий круг снова становится большим, потому что таймер для синего круга получил параметры, что он должен быть больше.

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

Поскольку синий круг имеет значение в течение 10 секунд, он снова автоматически увеличивается. Как мне сделать оба круга меньше, но оставить таймер обратного отсчета?

Я думал о том, чтобы остановить анимацию для синего круга и сохранить оставшиеся миллионы секунд анимации, нарисовать ее еще раз и снова запустить анимацию с оставшимися секундами, но я не знаю, как это сделать. Но, возможно, я смотрю в неправильном направлении, и я должен сделать это по-другому.

Благодарю.

Весь мой код:

 /************************************************************************/
/* 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);

Вот мой код, с которым работает таймер, и если вы нажмете на круг, он станет меньше, но если вы нажмете на него до того, как закончится bue cirlce, он снова станет большим.

ОБНОВЛЕНИЕ рабочей версии того, что я получил на jsFiddle, http://jsfiddle.net/hgwd92/2S4Dm/

Answer 1

Вот тебе скрипка..

Проблема заключалась в том, что вы перерисовывали элементы с новыми скоростями анимации и тому подобным. Используя функцию преобразования, вы можете добавить масштабное преобразование, которое действует независимо от рисования.

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

а затем установить его обратно...

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

Обратите внимание, что вам нужно установить центр для синей дуги (160, 160), или как только он пройдет половину пути, центр дуги будет двигаться, и он масштабируется в другое положение.

РЕДАКТИРОВАТЬ: Обновил скрипку и код, чтобы масштабировать синюю линию, чтобы она выглядела лучше.