Часы в стиле Mac. Часть 2

В этом уроке мы вдохнём жизнь в часы, созданные в первой части урока. Формат SVG очень гибок. Он поддерживает как неподвижную, так анимированную и интерактивную графику — или, в иных терминах, декларативную и скриптовую. Воспользуемся этим свойством, чтобы часы стали настоящими часами и выполняли свою главную функцию.

1. Необходимо нарисовать часики. Вариантов может быть много. Можете следовать первой части урока Часы в стиле Mac и получить результат, как на рисунке выше. Если вы выполнили урок, и у Вас есть часы, переходите к шагу 2.

2. Переместим все стрелки к левому верхнему углу страницы так, чтобы центр нижних сторон стрелок совпал с углом страницы. Проще всего это сделать так: выделим стрелку, установим значение горизонтальной координаты выделения (Х) равное -0.5*[ширина стрелки], установим значение вертикальной координаты выделения (Y) равное высоте страницы. Например, имеем документ высотой 500, стрелку шириной 6 пикселей,тогда координата X будет равна -3, координата Y будет равна 500.

Примечание: работать со светлой стрелкой на белом фоне очень сложно. Зайдите в меню Файл > Свойства документа и установите цвет фона на тот, с которым будет удобно работать.

3. Каждой стрелке надо сменить Идентификатор (ID): часовая - rot_hour, минутная - rot_min, секундная - rot_sec. Выделяем часовую стрелку, переходим в меню Объект > Свойства объекта (Shift + Ctrl + O). Откроется окно свойств, в поле ID впишите соответствующий идентификатор. Таким же образом смените ID у минутной и секундной стрелок.

4. Для каждой стрелки создадим свою группу. Выделите часовую стрелку и нажмите Ctrl + G (меню Объект > Сгруппировать). Создайте группы для минутной и секундной стрелок.

5. Перейдём к ручному редактированию документа в Редакторе XML. Выберите в меню Правка > Редактор XML (Shift + Ctrl + X). Нам необходимо переместить группы часовой, минутной и секундной стрелок в центр страницы (точка, вокруг которой будут вращаться стрелки). На рисунке выделите часовую стрелку, в Редакторе XML соответствующая ветвь элемента выделится автоматически . Задайте имя новому атрибуту transform, значение атрибута установите translate(x/2,y/2), где х и у соответственно ширина и высота документа (здесь рассматривается случай, когда ширина равна высоте т.е. наш документ квадратный). После этого часовая стрелка должна будет указывать от центра на значение времени 12. Тоже самое проделайте с группами минутной и секундной стрелок.

6. В редакторе XML создайте новую ветвь (кнопка  ). Дайте ей имя svg:script. Будет создана новая ветвь, идентификатор для неё определится автоматически. Внутри этой ветви создайте ветвь с текстом (кнопка ). В только что созданную текстовую ветвь вставьте следующий скрипт:

var angle_seconds = 0;var angle_minutes = 0;
var angle_hours = 0;
// Keep track of old time... so we don't update the display if not necessary.
// This is a mechanical clock so it's OK to move the second hand once every second.
var old_time = 0;
// The gear groups
var seconds;
var minutes;
var hours;
function Start(evt) {
seconds = evt.target.ownerDocument.getElementById("rot_sec");
minutes = evt.target.ownerDocument.getElementById("rot_min");
hours = evt.target.ownerDocument.getElementById("rot_hour" );
Run();
}
function Run() {
// Get computer clock time
var date = new Date();
var s = date.getSeconds();
var m = date.getMinutes();
var h = date.getHours();
// Set start angles... this is a little tricky
s += m * 60.0 + h * 3600.0;
if( old_time != s ) {
angle_seconds = (s * 6.0 ) % 360.0;
angle_minutes = (s * 6.0 / 60.0 ) % 360.0;
angle_hours = (s * 6.0 / 720.0 ) % 360.0;
seconds.setAttribute("transform", "rotate(" +angle_seconds+ ")");
minutes.setAttribute("transform", "rotate(" +angle_minutes+ ")");
hours.setAttribute( "transform", "rotate(" +angle_hours+ ")");
}
old_time = s;
// Repeat every 10th of a second.
setTimeout("Run()", 100)
}window.Run = Run

7. В редакторе XML выберите главную ветвь документа. Добавьте атрибут onload со значением Start(evt).

Сохраните SVG-рисунок и откройте его в браузере (браузер должен поддерживать отображение SVG). Если всё сделали правильно, то часы должны показывать время системных часов вашего ПК.