RaphaelJs Анимация круговой диаграммы на Hover - PullRequest
Новая
       12

RaphaelJs Анимация круговой диаграммы на Hover

0 голосов
/ 03 декабря 2011

Я настраиваю круговую диаграмму, приведенную на сайте Рафаэля по ссылке ниже. 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

кто-нибудь, пожалуйста, помогите мне решить эту проблему

Ответы [ 2 ]

1 голос
/ 04 декабря 2011

Вы, вероятно, должны использовать .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");
});
1 голос
/ 04 декабря 2011

Если я правильно понимаю ваш вопрос, вы хотите, чтобы срез полностью отключался от круговой диаграммы, когда кто-то наводит на него курсор.

Чтобы сделать это, вы хотите перевести сегмент, который позволяет вам перемещать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 или что угодно.Надеюсь, это поможет.

...