Сегодня мы будем создавать часы со стрелками. Хотя можно создать движение стрелок часов с помощью элементов HTML, трансформаций CSS и анимаций, нельзя задать таким часам правильное время для пользователя, для этого нам нужен Javascript. И если нам все равно понадобится Javascript, можно поэкспериментировать с программным интерфейсом приложения веб-анимации и показать, что в нем тоже можно использовать анимацию шагов для стрелок. Из-за новизны Web Animation API наша демонстрация может работать только в современных версиях браузеров Chrome и Firefox.

Разметка и CSS

Разметка состоит из элемента блока и трех элементов span в нем:

<div id="clock">
  <span id="minutehand"></span>
  <span id="hourhand"></span>
  <span id="secondhand"></span>
</div>

Связанные стили:

#clock {
  width: 30vw; height: 30vw;
  border-radius: 50%;
  border: 5px double #333;
  background: radial-gradient(#333, #000);
  margin: 2rem auto;
  position: relative;
}
#hourhand, #minutehand, #secondhand {
  position: absolute;
  background: white;
  transform-origin: bottom center;
  box-shadow: 0 0 4px 4px rgba(0, 0, 0, 0.3);
}

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

#hourhand {
  width: 4%;
  height: 30%;
  left: calc(50% - (4% / 2));
  top: calc(50% - 30%);
}
#minutehand {
  width: 2%;
  height: 40%;
  left: calc(50% - (2% / 2));
  top: calc(50% - 40%);
}
#secondhand {
  width: 1%;
  height: 45%;
  background: red;
  left: calc(50% - (1% / 2));
  top: calc(50% - 45%);
}

JavaScript

Код JavaScript, добавленный внизу страницы:

var d = new Date(),
hands = [secondhand,minutehand,hourhand],
initDeg = [6*d.getSeconds(), 6*d.getMinutes(), 30*(d.getHours()%12) + d.getMinutes()/2];
for (var i = 0; i < hands.length; i++) {
  var stepper = i == 0 ? 60 : 0;
  var animate = hands[i].animate([
    { transform: 'rotate(' + initDeg[i] + 'deg)' },
    { transform: 'rotate(' + (initDeg[i] + 360) + 'deg)' }
  ], {
    duration: 1000 * Math.pow(60, i + 1),
    easing: 'steps(' + stepper + ', start)',
    iterations: Infinity
  });
}

Краткое объяснение:

• Переменная d получает текущую дату.
• Массив hands содержит идентификаторы стрелок часов.
• В массиве initDeg находится текущее время — часы, минуты и секунды — переведенные в градусы.
• Цикл со счетчиком перебирает все элементы массива, увеличивая значение переменной i на единицу.
• Если значение переменной i равно нулю, переменной stepper устанавливается значение 60 с помощью условного оператора.
• Программный интерфейс приложения веб-анимации трансформирует все стрелки часов из их изначального расположения, т. е., текущего времени, на 360° от текущего положения, продолжительность определяется в миллисекундах с помощью возведения 60 в степень i + 1.
• Если значение переменной stepper равно 60, оно используется для параметра steps() , так как у первой стрелки не будет этого свойства, она сдвинется. Другие стрелки часов имеют параметр steps(0) , что создает для них линейную анимацию.

Демонстрацию работы этих часов со стрелками можно увидеть ниже:

Хотя здесь и использован Javascript, анимация все равно не идеально точная, так что, пожалуйста, не надейтесь на эти часы в Вашем личном расписании.

Автор урока Dudley Storey

Перевод — Дежурка

Смотрите также:

• Фоновые узоры в виде чешуи и шестиугольников с использованием SVG
• Создание таблицы с возможностью удаления строк
• Создание рекурсивного дизайна SVG, часть вторая