Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

Создание часов со стрелками

26 октября 2017 | Опубликовано в css | 2 Комментариев »

Сегодня мы будем создавать часы со стрелками. Хотя можно создать движение стрелок часов с помощью элементов 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

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

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




Комментарии

  1. Alex
    Thumb up Thumb down 0

    See the Pen The Digital Analog Clock by Alex (@AlexAverin) on CodePen.

    Ответить

Оставить ответ


8 − = один

Вставить изображение