Question

我有一个动画圈，看起来像这样： enter image description here

蓝色部分倒计时，例如在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秒，它会再次自动变大。如何让两个圆变小但保持定时器倒计时？

我正在考虑停止蓝色圆圈的动画并保存动画的剩余mili秒再次缩小并再次以剩余秒数开始动画，但我不知道如何做到这一点。但也许我正朝着错误的方向前进，我必须做出与众不同的事情。

感谢。

我的所有代码：

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

这是你的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），或者一旦圆弧中心移动一半，它将缩放到不同的位置。

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

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

1 个答案: