如何使用的onclick拉斐尔JS

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秒，它会自动变大。如何让两个圆圈更小但保持定时器倒计时？

我正在考虑停止蓝色圆圈的动画，并保存动画剩余的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); 

这里是我的代码计时器的作品，如果你点击圆圈就会变小，但如果你点击它，积屑瘤cirlce完成之前将再次成为大。

UPDATE 工作的是我对的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），或一旦它过去一半中心的弧线会移动并且会缩放到不同的位置。

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