javascript - 如何使用 raphael js 更改 onclick 动画圆圈的大小

Question

我有一个动画圆圈，如下所示:

蓝色部分倒计时，例如在 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);

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

更新 我在 jsFiddle 上得到的工作版本， http://jsfiddle.net/hgwd92/2S4Dm/

Answer 1

这是一个fiddle为你..

问题在于您使用新的动画速度等重新绘制项目。使用变换函数，您可以添加独立于绘制的缩放变换。

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)，或者一旦超过一半，弧线的中心就会移动，并且会缩放到不同的位置。

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