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

Have a question? Ask in chat with AI!

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

Анимированная диаграмма

Разметка

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


 

jQuery

 

CSS3

 

HTML5

 

PHP

 

MySQL

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/


3 комментария для “0

  1. Уведомление: Анимированная диаграмма умений с помощью JavaScript библиотеки Raphaël | Grabr
    1. указал) ссылку поставить не могу ибо ггл не позволяет)

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

Предыдущая запись Яндекс представил API для Яндекс.Услуг
Следующая запись WordPress: полезные SQL-запросы и сниппеты для WordPress