如何使用的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），或一旦它過去一半中心的弧線會移動並且會縮放到不同的位置。

編輯：更新了小提琴和代碼來縮放藍線，使其看起來更好。