【发布时间】：2013-05-09 06:31:31
【问题描述】：
我有一个动画圆圈，如下所示：
蓝色部分倒计时，例如在 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/
【问题讨论】：
-
首先我认为最好使用 Raphael 的方法来绑定事件（element.click(function(){//Do stuff})）。第二......你可以发布你的代码吗？如果我看到保留图片，对我来说可能会很容易。
-
同意，使用 circleDraw.click(function() {...});
-
我已经添加了我的代码。我希望你能帮助我:)
-
@hgwd92，你能在jsfiddle.net 设置一个工作示例吗？
-
这是一个工作的 jsFiddle，圆圈倒计时，但是当您单击它时，蓝色圆圈再次变大，当您单击它时，两个圆圈都应该变小，当您再次单击它时，它们应该是又大了。 http://jsfiddle.net/hgwd92/2S4Dm/
标签： javascript animation svg raphael svg-animate