Для початку нам знадобиться трохи HTML.
Спочатку я хотів використовувати три елементи (по одному для кожної зі стрілок). Але потім передумав і помістив кожну стрілку в елемент-контейнер. Незважаючи на те, що більш простий HTML-код підійшов би для базових CSS-анімації, елементи-контейнери знадобляться нам, якщо ми захочемо анімувати і встановлювати положення стрілок.
Почнемо з звичайних годин з круглим циферблатом і простими стрілками (часовий, хвилинної і секундної).
Ви можете завантажити SVG-фон тут. Крім того, я додав до нього псевдоелемент для створення в центрі суцільний чорного кола. Після цього ми можемо розташувати стрілки за цим псевдоелементи так, як нам буде необхідно.
В результаті у нас повинно вийти щось на зразок цього.
Перед додаванням стрілок нам потрібно розташувати контейнери.
Таким чином ми розташуємо кожен з контейнерів над циферблатом. Після цього ми створимо стрілки.
Годинна стрілка
Властивості «position» у кожної стрілки присвоюється значення absolute. і вона поміщається в позицію «12 годин». Почнемо з годинникової стрілки.
Хвилинна стрілка
Хвилинна стрілка схожа на годинну, але вона довше і тонше.
Секундна стрілка
Секундна стрілка ще тонше. Крім того, вона знаходиться нижче, виходячи за межі центру. Для цього ми задаємо властивості transform-origin значення 80%. Тепер 20% стрілки виходять за межі центру.
Зупинилися годинник показує правильний час лише двічі на день. Давайте додамо трохи анімації, щоб наш годинник більше були схожі на справжні.
Деякі годинник підскакують кожну секунду, видаючи при цьому цокаючий звук. Деякі годинник тихо мурличат, а їх стрілки рухаються дуже плавно. Ми спробуємо обидва варіанти. Для початку змусимо стрілки рухатися плавно.
Ми можемо поставити один ключовий кадр за допомогою властивості keyframes. щоб змусити стрілки виконувати оборот в 360 градусів (їх початкове положення при цьому приймається за 0%).
Цей ключовий кадр повідомляє елементу, що той повинен виконати анімацію повороту на 360 градусів, якщо кадр був застосований до елементу за допомогою властивості animation. Ми застосуємо до стрілок тимчасову функцію типу linear (лінійна), щоб змусити їх рухатися плавно.
Годинникова стрілка hours встановлена на виконання повного обороту за 12 годин (43 200 секунд). Хвилинна стрілка робить один оборот за годину, а секундна - за одну хвилину.
Зберемо все разом, і у нас готова анімація руху!
Якщо у вас дуже гострий зір, то ви навіть можете помітити, як рухається хвилинна стрілка. Для повного обороту їй знадобиться час, а годинниковою стрілкою для повного обороту знадобиться 12 годин.
Секундна стрілка робить оборот за 60 секунд, тому її рух помітити простіше.
Додавання "кроків"
Щоб рух наших стрілок більше нагадувало справжній годинник, ми можемо змусити секундну стрілку робити повний оборот за 60 окремих рухів. Зробити це просто. Використовуємо тимчасову функцію steps (кроки). В цьому випадку властивість animation для кожної зі стрілок буде виглядати наступним чином:
Тепер і хвилинна, і секундна стрілки виконують повний оборот за 60 кроків. Браузер автоматично розраховує, наскільки великим повинен бути кожен з цих 60 кроків.
Установка правильного часу
Ця функція перетворює час (години, хвилини і секунди) до відповідного кут для кожної зі стрілок. Після цього ми в циклі встановлюємо кожної зі стрілок потрібну величину кута за допомогою властивості style.transform зі значенням rotateZ.
Цей підхід спрацює в більшості браузерів, крім Сафарі і тих браузерів, які вимагають використання браузерних префіксів. Для їх підтримки ми використовуємо властивість style.webkitTransform.
Таким чином ми встановлюємо годинах поточний системний час.
Установка положення секундної і хвилинної стрілок
Нам потрібно переконатися, що рух хвилинної стрілки відбувається, коли секундна стрілка проходить позначку "12 годин".
Перед тим, як ми пересунемо хвилинну стрілку, нам потрібно повідомити, скільки пройшло секунд з початку поточного хвилини. Ви могли звернути увагу на ці рядки.
Вони потрібні для перевірки, чи є стрілка «хвилинної», і якщо так, то їй встановлюється атрибут «data» з поточним кутом секундної стрілки.
Встановивши атрибут «data», ми можемо використовувати ці дані, щоб обчислити, коли потрібно пересунути хвилинну стрілку.
Додавання відскоку
Ці переходи будуть застосовуватися до властивості transform і в них використовується тимчасова функція cubic-bezier (кубічна-Безьє). Ця тимчасова функція додає стрілкою невеликий відскік.
Годинники в стилі iOS 7
Я великий шанувальник мінімалізму годин, використаних в iOS 7 у Apple. З тих пір вони збільшили довжину стрілок, але мені подобається більше коротка версія.
Задавши стиль стрільцям і додавши фон з цифрами, ми можемо з легкістю відтворити цей образ.
Сам по собі цей дизайн є еволюцією Швейцарських залізничних годин Ганса Хільфікера. Трохи змінивши стиль і додавши нове фонове зображення, ми можемо адаптувати наші годинник під цей стиль.
Якщо ви придумаєте інші варіанти, дайте мені знати.
Використання Moment.js
Однією з ідей, що з'явилися, коли я вирішив написати цей пост, було відтворення образу годин в готелі, коли троє годин показують різні часові пояси.
Найпростішим способом налаштувати годинник на різні часові пояси є використання чудової бібліотеки Moment.js Timezone.
підтримка браузерами
Сучасні браузери вміють працювати з використаними в цій статті CSS-переходами і анімаціями. IE10 +, останні версії Chrome і Firefox підтримують їх без префіксів, а Safari вимагає префікса -webkit.
P.S. Це теж може бути цікаво:
Не минуло й півроку з останньої зміни робочого процесу W3C, як керівництву Консорціуму надійшла пропозиція застосувати нарешті цей новий процес на ділі. І списати вже неактуальні специфікації HTML в музей, щоб вони не заплутували розробників, «прикидаючись» актуальними.
Ще один модуль CSS, про який ми розповідали, непомітно дозрів до статусу, з якого W3C радить починати повсякденне використання новинок. Властивість contain дозволяє обмежувати зміни дерева відтворення, перерисовку CSS-боксів і зміни їх розмірів в межах елемента. Тому воно так важливо ...
ДАЛІ
З Парижа (на фото), де недавно проходила зустріч робочої групи CSS, прилетіла цікава новина: властивості grid-row-gap і grid-column-gap, а також їх скорочення grid-gap ...