Анимированная диаграмма умений с помощью JavaScript библиотеки Raphaël

Сегодня я бы хотел поведать вам о прекрасной JavaScript библиотеке Raphaël. Мы создадим анимированную диаграмму умений с помощью этой библиотеки. Идея очень проста: мы нарисуем несколько дуг с помощью математических функций и будем выводить уровень умения в центральном круге в процентах. Давайте приступим.

Разметка

Для начала разберемся как сделать правильную разметку. Весь HTML код будет внутри большого блока get. Внутри этого блока мы будем хранить все данные для отрисовки дуг. Далее мы создадим новый блок diagramm, в котором будут непосредственно отображаться наши дуги.

CSS

С помощью CSS мы сделаем всего 2 вещи:

• спрячем все элементы внутри блока get
• установим ширину и высоту блока diagramm

.get {
	display:none;
}

#diagram {
	float:left;
	width:600px;
	height:600px;
}

JavaScript

Основная идея такова: сначала нам нужно создать новый объект Raphael (переменная r) и нарисовать наш первый круг с радиусом, который задан переменной rad.
Далее нам нужно создать новый круг в объекте Raphael. Мы центрируем круг (x: 300px и y: 300px) и добавляем немного текста в него.

var o = {
	init: function(){
		this.diagram();
	},
	random: function(l, u){
		return Math.floor((Math.random()*(u-l+1))+l);
	},
	diagram: function(){
		var r = Raphael('diagram', 600, 600),
			rad = 73;

		r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

		var title = r.text(300, 300, 'Skills').attr({
			font: '20px Arial',
			fill: '#fff'
		}).toFront();

	}
}

Двигаемся дальше. Расширим объект Raphael дополнительными атрибутами:

• alpha — угол дуги
• random — рандомное (случайное) число из заданного из заданного интервала
• sx, sy — начать отрисовку с этой точки
• x, y — закончить отрисовку в этой точке
• path:
  • M — перейти в точку начала отрисовки; ничего не рисуется
  • A — радиус по x, радиус по y, вращение по оси x, large-arc-flag, sweep-flag, x, y

var o = {
	init: function(){
		this.diagram();
	},
	random: function(l, u){
		return Math.floor((Math.random()*(u-l+1))+l);
	},
	diagram: function(){
		var r = Raphael('diagram', 600, 600),
			rad = 73;

		r.circle(300, 300, 85).attr({ stroke: 'none', fill: '#193340' });

		var title = r.text(300, 300, 'Skills').attr({
			font: '20px Arial',
			fill: '#fff'
		}).toFront();

		r.customAttributes.arc = function(value, color, rad){
			var v = 3.6*value,
				alpha = v == 360 ? 359.99 : v,
				random = o.random(91, 240),
				a = (random-alpha) * Math.PI/180,
				b = random * Math.PI/180,
				sx = 300 + rad * Math.cos(b),
				sy = 300 - rad * Math.sin(b),
				x = 300 + rad * Math.cos(a),
				y = 300 - rad * Math.sin(a),
				path = [['M', sx, sy], ['A', rad, rad, 0, +(alpha > 180), 1, x, y]];
			return { path: path, stroke: color }
		}

		$('.get').find('.arc').each(function(i){
			var t = $(this),
				color = t.find('.color').val(),
				value = t.find('.percent').val(),
				text = t.find('.text').text();

			rad += 30;
			var z = r.path().attr({ arc: [value, color, rad], 'stroke-width': 26 });

			z.mouseover(function(){
                this.animate({ 'stroke-width': 50, opacity: .75 }, 1000, 'elastic');
                if(Raphael.type != 'VML') //solves IE problem
					this.toFront();
				title.animate({ opacity: 0 }, 500, '>', function(){
					this.attr({ text: text + 'n' + value + '%' }).animate({ opacity: 1 }, 500, '< ');
				});
            }).mouseout(function(){
				this.animate({ 'stroke-width': 26, opacity: 1 }, 1000, 'elastic');
            });
		});
	}
}

Далее мы получаем все необходимые данные, такие как значение в процентах, цвет текста и цвет дуги. Для каждой последующей дуги мы увеличиваем радиус и в итоге меняем атрибут path. Для эффектности мы добавим анимацию при наведении курсора мыши: название внутри основного круга будет меняться, дуга станет немного больше.

Посмотреть образец работы такой вот диаграммы можно на моем блоге rusdigi.name в разделе Обо мне. Скачать саму библиотеку Raphael можно по ссылке. Там же вы найдете еще массу примеров работы с данной JavaScript библиотекой.

Пропустили любимую передачу Дом 2? Вам представляется возможность смотреть дом 2 онлайн — все свежие выпуски сразу же после выхода шоу на ТНТ.

Оригинальная статья http://tympanus.net/codrops/2011/04/22/animated-skills-diagram/