Question

我正在定制下面链接raphael网站上给出的饼图 http://raphaeljs.com/pie.html

此图表显示悬停切片时的动画，此动画只需稍微展开切片

我想要的是将切片与图表分开

我使用以下代码行的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

任何人都可以帮我解决这个问题

Answer 1

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

要执行此操作，您需要转换段，该段允许您将给定方向上的SVG对象移向x，y坐标。我不是SVG专家，所以我建议你自己看一下这个功能的全部功能。无论如何，要使用Raphael执行这些类型的操作，您可以使用Element.transform，或者可以在animate调用中提供转换值。

其中第二个是您提供的示例中发生的情况，但正在使用比例转换，如s中的前导transform: "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值。文本的定位也是这样的，所以我只是从那里获取所需的数学。另外，我刚刚离开bounce动画，但您可以将其更改为linear或任何您想要的动画。希望有所帮助。

Answer 2

你可能应该使用拉斐尔内置的.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");
});

RaphaelJs饼图动画悬停

2 个答案: