0

我有一个看起来像这样的动画圆圈： 在此处输入图像描述

蓝色部分倒计时，例如在 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 圆圈完成之前点击它，它会再次变大。

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

4

1 回答 1

6

这是给你的小提琴..

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

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

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

于 2013-05-08T22:18:38.813 回答