Хитрый Рафаэль SVG анимация

Question

Я создал диаграмму «пончик» из этого jsfiddle , используя Рафаэля.

Я настроил этот скрипт в соответствии со своими потребностями, и в настоящее время это отображается.

Моя цель - оживить каждый кусочек (одновременно); например, заставить синий ломтик расти до 60%; и красный ломтик сокращается до 40%.

Мне удалось перерисовать фрагменты, удалив существующий и быстро перерисовав новый с настроенными значениями (например, 51, 49). Но проблема в том, что это мгновенно.

Мой вопрос,

(а) Можно ли анимировать это без необходимости перерисовывать объект (и как)? (b) Если нет, то как я могу оживить этот эффект, используя логику перерисовки?

Answer 1

Да.Пример того, как это сделать, можно найти на демонстрационной странице Raphael, где вы получили круговую диаграмму.См. Демонстрационную версию Growing Pie .

. Вы должны отделить код, в котором вы генерируете путь, в отдельную функцию, чтобы вы могли использовать его позже для возврата новых путей.Чтобы использовать animate (), вам нужно определить функцию для customAttributes объекта ;он должен возвращать (по крайней мере) объект со свойством path, установленным на новый путь вашего среза.

Поскольку у вас есть метки, вы, вероятно, захотите изменить код так, чтобы куски пирога расширялись / сжималисьотносительно их центра, так что вам также не нужно перемещать надписи, поскольку надписи центрированы по "оси" их среза.

Обновление

Вот пример JSFiddle с простым примером, почти таким же, как у демонстрации Дмитрия Растущего Пирога, за исключением того, что больше похоже на ваш график.Я экспортирую setValue() метод для изменения размеров среза и вызываю его при загрузке страницы.См. его сообщение в блоге о добавлении customAttributes, также.

В моем последнем абзаце выше я был немного не в себе.На вашем графике не было ярлыков;Я их перепутал.Кроме того, было бы сложнее держать кусочки по центру, поэтому я не стал этого делать.Функция animate() устанавливает для каждого сегмента новые начальные и конечные точки на круге, а Рафаэль вычисляет промежуточные точки.Как видите, вы можете передать несколько аргументов в массиве.

this.customAttributes.slice = function(a0, a1) { /*...*/ }
// ...
chart.push(paper.path().attr({slice:[0, Math.PI/2 ]})

Answer 2

Невозможно увидеть всю скрипку, потому что я на iPod, однако звучит так, как будто вам нужен живой вызов внутри функции, которую вам нужно написать. Используйте параметр callback, который вызывает функцию, внутри которой он находится.Кодируйте вашу рекурсивно вызванную функцию, чтобы она в конечном итоге завершилась, когда вся работа будет выполнена.Каждый вызов функции будет происходить в конце каждого заданного вами интервала времени ...