RaphaelJs 饼图悬停动画

Question

我正在自定义下面链接的拉斐尔网站上给出的饼图 http://raphaeljs.com/pie.html

此图表显示悬停切片时的动画，此动画只需将切片扩展一点，

我想要的是将切片与我使用以下代码行的转换属性播放的图表分开

，但无法按照我的意愿制作。

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

有人请帮我解决这个问题

Answer 1

如果我正确理解你的问题，那么当有人将鼠标悬停在切片上时，你希望切片与饼图完全断开连接。

为此，您需要平移该段，这样您就可以将 SVG 对象沿给定方向（即 x、y 坐标）移动。我不是 SVG 专业人士，所以我建议您自己研究一下它的完整功能；无论如何，要使用 Raphael 执行这些类型的操作，您可以使用 Element.transform，或者可以在 animate 调用中提供变换值。

第二个是您提供的示例中发生的情况，除了使用比例转换之外，如 transform 中的前导 s 所示：“s1.1 1.1.。

，您想要使用移动对象但不会使其变大的平移 - 它使用 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 值。文本的定位也执行类似的操作。这个，所以我只是从那里得到了所需的数学知识。另外，我只保留了反弹动画，但您可以将其更改为线性或任何您想要的。希望有帮助。

Answer 2

您可能应该使用 Raphael 中内置的 .hover。请参阅此处的文档：http://raphaeljs.com/reference.html#Element.hover

通过奥利的例子，我能够弄清楚大部分基本的动画原理。作为一个数学大师，这个例子有很多空白需要填补。这是一个功能齐全的版本（经过测试）。享受！

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");
});