882 В этом руководстве мы покажем вам, как создавать анимированные диаграммы с помощью небольшой JavaScript библиотеки Raphael.
Почему она? Потому что, именно эта библиотека идеально подходит для работы с векторной графикой.
Идея реализации состоит в том, что мы будем рисовать геометрию с помощью математических функций и отображать количество процентов в центральной окружности. Приступим.
Разметка
HTML структура будет состоять из основного контейнера с классом get. Этот контейнер будет содержать все данные, необходимые для отрисовки дуг. Далее, создадим новый элемент DIV с id diagram, который и будет контейнером для дуг:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div id="diagram"></div> <div class="get"> <div class="arc"> <span class="text">jQuery</span> <input type="hidden" class="percent" value="95" /> <input type="hidden" class="color" value="#97BE0D" /> </div> <div class="arc"> <span class="text">CSS3</span> <input type="hidden" class="percent" value="90" /> <input type="hidden" class="color" value="#D84F5F" /> </div> <div class="arc"> <span class="text">HTML5</span> <input type="hidden" class="percent" value="80" /> <input type="hidden" class="color" value="#88B8E6" /> </div> <div class="arc"> <span class="text">PHP</span> <input type="hidden" class="percent" value="53" /> <input type="hidden" class="color" value="#BEDBE9" /> </div> <div class="arc"> <span class="text">MySQL</span> <input type="hidden" class="percent" value="45" /> <input type="hidden" class="color" value="#EDEBEE" /> </div> </div> |
CSS
В CSS мы будем делать только две вещи: прятать элементы с классом get и устанавливать ширину и высоту для элемента DIV с id diagram:
|
1 2 3 4 5 6 7 8 9 |
.get { display:none; } #diagram { float:left; width:600px; height:600px; } |
JavaScript
Основная идея состоит в том, что сначала создаем Raphael объект (переменная r) и отрисовываем нашу первую окружность с радиусом rad.
Далее создаем новую окружность в Raphael объекте. Центрируем окружность (x: 300px и y: 300px) и добавляем в нее некоторый текст.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
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 – конечная точка отрисовки
- путь
- M – перейти к начальной точке без отрисовки. Все данные должны начинаться с команды
moveto. - A – radius-x, radius-y x-axis-rotation, large-arc-flag, sweep-flag, x, y
- M – перейти к начальной точке без отрисовки. Все данные должны начинаться с команды
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 |
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'); }); }); } } |
В дальнейшем, при получении необходимых данных (проценты, цвет дуги и текст), мы будем строить каждую дугу, увеличивая ее радиус.
В конце мы добавим некоторые эффекты анимации при наведении на дугу курсором мышки и изменим текст в центральной окружности на проценты.
Выводы
Сегодня мы изучили основные возможности Raphael. Это очень мощная библиотека, с помощью которой можно создавать удивительные геометрические вещи. Достаточно взглянуть на примеры ее использования.
Ну, а если на вашей мебели появились первые результаты ее использования, то достаточно лишь купить мебельный воск и замазать им все царапины и отверстия. Например, там вы можете купить его и совсем недорого.
тупо спиздили статью