RaphaelJs 饼图动画悬停答案

【问题标题】：RaphaelJs Pie Chart Animation on HoverRaphaelJs 饼图动画悬停
【发布时间】：2011-12-02 22:31:35
【问题描述】：

我正在自定义以下链接的 raphael 网站上给出的饼图 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

请大家帮我解决这个问题

【问题讨论】：

图片链接已损坏。我推荐使用 SO 的图片托管，如果你能得到一个工作链接。

标签： javascript animation raphael pie-chart

【解决方案1】：

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

为此，您需要平移段，这允许您将 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 或任何您想要的。希望对您有所帮助。

【讨论】：

【解决方案2】：

您可能应该使用 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");
});

【讨论】：