Javascript 如何使用raphael js更改动画圆形的大小

我有一个动画圆圈，看起来像这样：

蓝色部分倒计时，例如在10秒内从满到空。橙色的圆圈只是一个圆圈。但我希望当你点击它时，圆圈会变小。所以我为圆圈做了一个onclick活动

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

这是我的代码，计时器工作，如果你点击圆圈，它会变小，但如果你在圆圈完成之前点击它，它会再次变大

更新 我在JSFIDLE上得到的工作版本， 这是给你的

问题是你在哪里重画的项目，与新的动画速度等。使用“变换”功能，可以添加独立于绘图的缩放变换

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）的中心，或者一旦超过一半，弧的中心将移动，并缩放到不同的位置

编辑：更新了小提琴和代码，以将蓝线缩放到更好的位置。

这是给你的答案

问题是你在哪里重画的项目，与新的动画速度等。使用“变换”功能，可以添加独立于绘图的缩放变换

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）的中心，或者一旦超过一半，弧的中心将移动，并缩放到不同的位置

---

编辑：更新了提琴和代码，以缩放蓝线，使其看起来更好。

首先，我认为最好使用Raphael的方法绑定事件（元素。单击（function（）{//Do stuff}））。第二。。。你能发布你的代码吗？如果我看到保留图片，对我来说可能很容易。同意，使用circleDraw.click（function（）{…}）；我已经添加了我的代码。我希望你能帮助我：）@hgwd92，你能在上建立一个工作示例吗？这是一个工作示例，圆圈倒计时，但当你点击它时，蓝色圆圈又变大了，当你点击它时，两个圆圈都应该变小，当你再次点击它时，它们应该又变大了。首先，我认为最好使用Raphael的方法来绑定事件（element.click（function（）{//Do stuff}））。第二。。。你能发布你的代码吗？如果我看到保留图片，对我来说可能很容易。同意，使用circleDraw.click（function（）{…}）；我已经添加了我的代码。我希望你能帮助我：）@hgwd92，你能在上建立一个工作示例吗？这是一个工作示例，圆圈倒计时，但当你点击它时，蓝色圆圈又变大了，当你点击它时，两个圆圈都应该变小，当你再次点击它时，它们应该又变大了。