raphael viewbox動畫縮放

Question

我用javascript和Raphael構建了一種JavaScript地圖。 我可以在單擊時放大對象，但我希望它可以動畫（如慢慢潛入等）。有沒有辦法做到這一點，而不是重新發明輪子？

Answer 1

沒有理由說svg對象的viewbox不能動畫 - Raphael根本不提供這種功能。然而，創建一個插件相當簡單。例如：

Raphael.fn.animateViewBox = function animateViewBox(x, y, w, h, duration, easing_function, callback) 
{ 
    var cx = this._viewBox ? this._viewBox[0] : 0, 
     dx = x - cx, 
     cy = this._viewBox ? this._viewBox[1] : 0, 
     dy = y - cy, 
     cw = this._viewBox ? this._viewBox[2] : this.width, 
     dw = w - cw, 
     ch = this._viewBox ? this._viewBox[3] : this.height, 
     dh = h - ch, 
     self = this;; 
    easing_function = easing_function || "linear"; 

    var interval = 25; 
    var steps = duration/interval; 
    var current_step = 0; 
    var easing_formula = Raphael.easing_formulas[easing_function]; 

    var intervalID = setInterval(function() 
     { 
      var ratio = current_step/steps; 
      self.setViewBox(cx + dx * easing_formula(ratio), 
          cy + dy * easing_formula(ratio), 
          cw + dw * easing_formula(ratio), 
          ch + dh * easing_formula(ratio), false); 
      if (current_step++ >= steps) 
      { 
       clearInterval(intervalID); 
       callback && callback(); 
      } 
     }, interval); 
} 

安裝此插件後，可以在同一個方法拉斐爾的內置動畫的方法的工作原理使用animateViewBox實例化的任何文件。例如...

var paper = Raphael(0, 0, 640, 480); 
paper.animateViewBox(100, 100, 320, 240, 5000, '<>', function() 
    { 
     alert("View box updated! What's next?"); 
    }); 

示範上演here。

Answer 2

Raphael動畫通過動畫元素屬性進行工作。當你調用element.animate時，你提供了最終的對象參數，到達那裏的時間以及如果你不希望它是線性的可能的緩動函數。

例如，規模上/下一個圈，你可能會考慮這個例子：http://jsfiddle.net/eUfCg/

// Creates canvas 320 × 200 at 10, 50 
var paper = Raphael(10, 50, 320, 200); 

// Creates circle at x = 50, y = 40, with radius 10 
var circle = paper.circle(50, 40, 10); 
// Sets the fill attribute of the circle to red (#f00) 
circle.attr("fill", "#f00"); 

// Sets the stroke attribute of the circle to white 
circle.attr("stroke", "#fff"); 


var zoomed = false; 

circle.click(function() { 
    if (zoomed) { 
     this.animate({ transform: "s1" }, 500); 
     zoomed = false; 
    } else { 
     this.animate({ transform: "s4" }, 500); 
     zoomed = true; 
    } 
});​ 

哪個動畫圓的變換屬性。要縮放地圖，您應該將所有元素放入組中，並根據要結束的縮放比例和翻譯來爲組的transform屬性設置動畫效果。

有關transform屬性的更多信息，請參閱http://raphaeljs.com/reference.html#Element.transform。