RaphaelJs餅圖動畫懸停

我正在定製下面的鏈接拉斐爾網站給出的餅圖 http://raphaeljs.com/pie.html RaphaelJs餅圖動畫懸停

此圖顯示的動畫時，懸停片，這部動畫簡單地擴展切片有點

什麼我想要從圖表中分離切片

我玩了以下代碼行的transform屬性，但無法按照我的想法制作它。

p.mouseover(function() { 
var xis= p.getBBox(true); 
p.stop().animate({transform: "s1.1 1.1 "+ cx + " " + cy }, ms, "linear"); 
txt.stop().animate({opacity: 1}, ms, "linear"); 
}).mouseout(function() { 
p.stop().animate({transform: ""}, ms, "linear"); 
txt.stop().animate({opacity: 0}, ms); 
});

改變線3的Cx和Cy實際上固定爲每個切片中的動畫中相同的方式，即，在每懸停片將不斷地改變的位置。

http://imageshack.us/photo/my-images/690/sliced1.png

請人幫助我。如果我理解你的問題正確的話，你要當有人懸停在片完全從餅圖斷開來解決這個問題

來源

2011-12-02 Mujtaba Haider

圖片鏈接已損壞。我建議使用SO的圖片託管，如果你能得到一個工作鏈接。 –

。

要做到這一點，你想要翻譯的段，它允許你移動一個SVG對象在給定的方向，朝着x，y座標。我不是SVG專業人員，所以我建議你自己看看這個功能。無論如何，通過Raphael執行這些操作，您可以使用Element.transform，或者可以在調用animate時提供變換值。

第二個是您提供的示例中正在發生的情況，但正在使用縮放轉換，正如transform: "s1.1 1.1.中的前導s所示。比例尺會使對象更大。

在這裏，你想使用一個移動物體但不會變大的翻譯 - 它使用一個t。

這裏的代碼稍加修改塊，將做到這一點：

 p.mouseover(function() { 
      var distance = 20; 
      var xShiftTo = distance*Math.cos(-popangle * rad); 
      var yShiftTo = distance*Math.sin(-popangle * rad); 
      p.stop().animate({transform: "t" + xShiftTo + " " + yShiftTo}, ms, "bounce"); 
      txt.stop().animate({opacity: 1}, ms, "bounce"); 
     }).mouseout(function() { 
      p.stop().animate({transform: ""}, ms, "bounce"); 
      txt.stop().animate({opacity: 0}, ms); 
     });

在這個例子中，distance指片應該移動多遠離開（可以隨意調整此），xShiftTo和yShiftTo相對於當前所在的位置，計算對象應該移動的x，y值。請注意，這有點複雜 - 你需要找出遠離餡餅中心的給定角度的x，y值。文本的定位也是這樣的，所以我只是從那裏拿出所需的數學。另外，我剛剛離開了bounce動畫，但您可以將其更改爲linear或任何您想要的。希望有所幫助。

來源

2011-12-04 05:01:21 oli

感謝奧利！它解決了我的問題 –

你應該使用內置於Raphael的.hover。在這裏看到文檔：http://raphaeljs.com/reference.html#Element.hover

Oli的例子的工作我能弄清楚大部分的基本動畫原理。不是數學大師，在這個例子中填補了很多空白。這是一個完整的功能版本（測試）。請享用！

pie.hover(function() { 
    // Stop all existing animation 
    this.sector.stop(); 

    // Collect/Create variables 
    var rad = Math.PI/180; 
    var distance = 50; // Amount in pixels to push graph segment out 
    var popangle = this.sector.mangle; // Pull angle right out of segment object 
    var ms = 300; // Time in milliseconds 

    // Setup shift variables to move pie segments 
    var xShiftTo = distance*Math.cos(-popangle * rad); 
    var yShiftTo = distance*Math.sin(-popangle * rad); 

    this.sector.animate({transform: "t" + xShiftTo + " " + yShiftTo}, ms, "linear"); 
}, function() { 
    // Passing an empty transform property animates the segment back to its default location 
    this.sector.animate({ transform: '' }, ms, "linear"); 
});

來源

2011-12-04 16:35:33

RaphaelJs餅圖動畫懸停

回答

相關問題