我有一个看起来像这样的动画圆圈：
蓝色部分倒计时，例如在 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/