1. HTML
2. циферблат
3. Годинна стрілка
4. Хвилинна стрілка
5. Секундна стрілка
6. анімація
7. Додавання "кроків"
8. Установка правильного часу
9. Установка положення секундної і хвилинної стрілок
10. Додавання відскоку
11. Годинники в стилі iOS 7
12. Використання Moment.js
13. підтримка браузерами

Переклад статті Clocks із сайту cssanimation.rocks .

Час прийшов. У цій статті ми спробуємо вирішити задачу по створенню і анімації настінного годинника, використовуючи прості CSS-анімації і JavaScript для їх запуску.

Перед вами годинник, які ми створимо за допомогою HTML, CSS, SVG-фону і невеликої кількості JavaScript. Ми будемо використовувати CSS-анімації або переходи для будь-яких типів рухів, а за допомогою JavaScript ми будемо задавати початкове час і додамо базові CSS-трансформації.

HTML

Для початку нам знадобиться трохи HTML.

<Article class = "clock"> <div class = "hours-container"> <div class = "hours"> </ div> </ div> <div class = "minutes-container"> <div class = "minutes "> </ div> </ div> <div class =" seconds-container "> <div class =" seconds "> </ div> </ div> </ article>

Спочатку я хотів використовувати три елементи (по одному для кожної зі стрілок). Але потім передумав і помістив кожну стрілку в елемент-контейнер. Незважаючи на те, що більш простий HTML-код підійшов би для базових CSS-анімації, елементи-контейнери знадобляться нам, якщо ми захочемо анімувати і встановлювати положення стрілок.

циферблат

Почнемо з звичайних годин з круглим циферблатом і простими стрілками (часовий, хвилинної і секундної).

.clock {border-radius: 50%; background: #fff url (/assets/images/posts/clocks/ios_clock.svg) no-repeat center; background-size: 88%; height: 20em; padding-bottom: 31%; position: relative; width: 20em; } .Clock.simple: after {background: # 000; border-radius: 50%; content: ""; position: absolute; left: 50%; top: 50%; transform: translate (-50%, -50%); width: 5%; height: 5%; z-index: 10; }

Ви можете скачати SVG-фон тут . Крім того, я додав до нього псевдоелемент для створення в центрі суцільний чорного кола. Після цього ми можемо розташувати стрілки за цим псевдоелементи так, як нам буде необхідно.

В результаті у нас повинно вийти щось на зразок цього.

Перед додаванням стрілок нам потрібно розташувати контейнери.

.minutes-container, .hours-container, .seconds-container {position: absolute; top: 0; right: 0; bottom: 0; left: 0; }

Таким чином ми розташуємо кожен з контейнерів над циферблатом. Після цього ми створимо стрілки.

Годинна стрілка

Властивості «position» у кожної стрілки присвоюється значення absolute, і вона поміщається в позицію «12 годин». Почнемо з годинникової стрілки.

.hours {background: # 000; height: 20%; left: 48.75%; position: absolute; top: 30%; transform-origin: 50% 100%; width: 2.5%; }

Я використовую значення у відсотках, щоб спростити завдання масштабування годин. Для цього потрібно витратити трохи більше сил, але зате результат завжди легко підігнати під розміри області перегляду або зменшити під екрани мобільних пристроїв. Ми також переносимо точку обертання стрілки в нижню частину за допомогою властивості transform-origin, що дозволить нам повертати стрілку.

Хвилинна стрілка

Хвилинна стрілка схожа на годинну, але вона довше і тонше.

.minutes {background: # 000; height: 40%; left: 49%; position: absolute; top: 10%; transform-origin: 50% 100%; width: 2%; }

Секундна стрілка

Секундна стрілка ще тонше. Крім того, вона знаходиться нижче, виходячи за межі центру. Для цього ми задаємо властивості transform-origin значення 80%. Тепер 20% стрілки виходять за межі центру.

.seconds {background: # 000; height: 45%; left: 49.5%; position: absolute; top: 14%; transform-origin: 50% 80%; width: 1%; z-index: 8; }

анімація

Зупинилися годинник показує правильний час лише двічі на день. Давайте додамо трохи анімації, щоб наш годинник більше були схожі на справжні.

Деякі годинник підскакують кожну секунду, видаючи при цьому цокаючий звук. Деякі годинник тихо мурличат, а їх стрілки рухаються дуже плавно. Ми спробуємо обидва варіанти. Для початку змусимо стрілки рухатися плавно.

Ми можемо поставити один ключовий кадр за допомогою властивості keyframes, щоб змусити стрілки виконувати оборот в 360 градусів (їх початкове положення при цьому приймається за 0%).

@keyframes rotate {100% {transform: rotateZ (360deg); }}

Цей ключовий кадр повідомляє елементу, що той повинен виконати анімацію повороту на 360 градусів, якщо кадр був застосований до елементу за допомогою властивості animation. Ми застосуємо до стрілок тимчасову функцію типу linear (лінійна), щоб змусити їх рухатися плавно.

.hours-container {animation: rotate 43200s infinite linear; } .Minutes-container {animation: rotate 3600s infinite linear; } .Seconds-container {animation: rotate 60s infinite linear; }

Годинникова стрілка hours встановлена ​​на виконання повного обороту за 12 годин (43 200 секунд). Хвилинна стрілка робить один оборот за годину, а секундна - за одну хвилину.

Зберемо все разом, і у нас готова анімація руху!

Якщо у вас дуже гострий зір, то ви навіть можете помітити, як рухається хвилинна стрілка. Для повного обороту їй знадобиться час, а годинниковою стрілкою для повного обороту знадобиться 12 годин.

Секундна стрілка робить оборот за 60 секунд, тому її рух помітити простіше.

Додавання "кроків"

Щоб рух наших стрілок більше нагадувало справжній годинник, ми можемо змусити секундну стрілку робити повний оборот за 60 окремих рухів. Зробити це просто. Використовуємо тимчасову функцію steps (кроки). В цьому випадку властивість animation для кожної зі стрілок буде виглядати наступним чином:

.minutes-container {animation: rotate 3600s infinite steps (60); } .Seconds-container {animation: rotate 60s infinite steps (60); }

Тепер і хвилинна, і секундна стрілки виконують повний оборот за 60 кроків. Браузер автоматично розраховує, наскільки великим повинен бути кожен з цих 60 кроків.

Установка правильного часу

Звичайно, здорово, коли годинник виглядають симпатично, але як змусити їх показувати правильний час? Додавши трохи JavaScript, ми можемо показувати нашим користувачам коректне час. Ось потрібний нам код.

/ * * Встановлює точку відліку будь-яких годин в свій місцевий час користувача * З сайту: cssanimation.rocks/clocks * / function initLocalClocks () {// Дізнатися місцевий час за допомогою JS var date = new Date; var seconds = date.getSeconds (); var minutes = date.getMinutes (); var hours = date.getHours (); // Створити об'єкт, який зберігає всі стрілки і їх кути в градусах var hands = [{hand: 'hours', angle: (hours * 30) + (minutes / 2)}, {hand: 'minutes', angle: (minutes * 6)}, {hand: 'seconds', angle: (seconds * 6)}]; // З допомогою циклу встановити кут для кожної зі стрілок for (var j = 0; j <hands.length; j ++) {var elements = document.querySelectorAll ( '.' + Hands [j] .hand); for (var k = 0; k <elements.length; k ++) {elements [k] .style.webkitTransform = 'rotateZ (' + hands [j] .angle + 'deg)'; elements [k] .style.transform = 'rotateZ (' + hands [j] .angle + 'deg)'; // Якщо це хвилинна стрілка, зберегти положення секундної стрілки (для подальшого розрахунку положення хвилинної стрілки) if (hands [j] .hand === 'minutes') {elements [k] .parentNode.setAttribute ( 'data-second-angle ', hands [j + 1] .angle); }}}}

Ця функція перетворює час (години, хвилини і секунди) до відповідного кут для кожної зі стрілок. Після цього ми в циклі встановлюємо кожної зі стрілок потрібну величину кута за допомогою властивості style.transform зі значенням rotateZ.

Цей підхід спрацює в більшості браузерів, крім Сафарі і тих браузерів, які вимагають використання браузерних префіксів. Для їх підтримки ми використовуємо властивість style.webkitTransform.

Таким чином ми встановлюємо годинах поточний системний час.

Установка положення секундної і хвилинної стрілок

Нам потрібно переконатися, що рух хвилинної стрілки відбувається, коли секундна стрілка проходить позначку "12 годин".

Коли годинник вперше отрісовиваємих на екрані, час до наступного руху хвилинної стрілки менше однієї хвилини. Для вирішення цього завдання ми можемо розрахувати, скільки секунд залишилося до кінця цієї хвилини, і вручну пересунути стрілку. Раз вже ми використовували JavaScript для першого руху стрілки, ми можемо і далі повертати її на шість градусів кожну хвилину за допомогою методу setInterval.

Перед тим, як ми пересунемо хвилинну стрілку, нам потрібно повідомити, скільки пройшло секунд з початку поточного хвилини. Ви могли звернути увагу на ці рядки.

if (degrees [j] .hand === 'minutes') {elements [k] .parentNode.setAttribute ( 'data-second-angle', degrees [j + 1] .degree); }

Вони потрібні для перевірки, чи є стрілка «хвилинної», і якщо так, то їй встановлюється атрибут «data» з поточним кутом секундної стрілки.

Встановивши атрибут «data», ми можемо використовувати ці дані, щоб обчислити, коли потрібно пересунути хвилинну стрілку.

/ * * Встановити таймаут для першого руху хвилинної стрілки (менше 1 хвилини), після чого повертати її кожну хвилину * / function setUpMinuteHands () {// Обчислити, скільки секунд пройшло з початку цієї хвилини var containers = document.querySelectorAll ( '. Minutes -container '); var secondAngle = containers [0] .getAttribute ( "data-second-angle"); if (secondAngle> 0) {// Встановити таймаут до кінця поточної хвилини, щоб пересунути стрілку var delay = (((360 - secondAngle) / 6) + 0.1) * 1000; setTimeout (function () {moveMinuteHands (containers);}, delay); }} / * * Виконати перший поворот хвилинної стрілки * / function moveMinuteHands (containers) {for (var i = 0; i <containers.length; i ++) {containers [i] .style.webkitTransform = 'rotateZ (6deg)'; containers [i] .style.transform = 'rotateZ (6deg)'; } // Після цього продовжити з інтервалом в 60 секунд setInterval (function () {for (var i = 0; i <containers.length; i ++) {if (containers [i] .angle === undefined) {containers [i ] .angle = 12;} else {containers [i] .angle + = 6;} containers [i] .style.webkitTransform = 'rotateZ (' + containers [i] .angle + 'deg)'; containers [i] .style.transform = 'rotateZ (' + containers [i] .angle + 'deg)';}}, 60000); }

Додавання відскоку

Оскільки для переміщення хвилинної стрілки ми тепер використовуємо JavaScript, нам слід прибрати властивість 'animation'. Замість того, щоб просто його видалити, ми можемо замінити його на 'transition'. Це дозволить нам додати в анімацію трохи оригінальності.

У момент установки стрілкою нового кута за допомогою JavaScript, CSS-перехід елемента буде змушувати браузер анімувати його нове положення. Це означає, що JavaScript буде займатися лише простим зміною кута, а браузер займеться його анімацією.

Перед тим як зробити це, нам потрібно вдосконалити код, щоб почати використовувати JavaScript і для переміщення секундної стрілки. Давайте використаємо цей код для анімації контейнера секундної стрілки 60 разів на хвилину.

/ * * Переміщення контейнера секундної стрілки * / function moveSecondHands () {var containers = document.querySelectorAll ( '. Seconds-container'); setInterval (function () {for (var i = 0; i <containers.length; i ++) {if (containers [i] .angle === undefined) {containers [i] .angle = 6;} else {containers [ i] .angle + = 6;} containers [i] .style.webkitTransform = 'rotateZ (' + containers [i] .angle + 'deg)'; containers [i] .style.transform = 'rotateZ (' + containers [i] .angle + 'deg)';}} 1000); }

Тепер, коли секундної і хвилинною стрілкою займається JavaScript, оновимо CSS, замінивши властивості animation на transition.

.minutes-container {transition: transform 0.3s cubic-bezier (.4,2.08, .55, .44); } .Seconds-container {transition: transform 0.2s cubic-bezier (.4,2.08, .55, .44); }

Ці переходи будуть застосовуватися до властивості transform і в них використовується тимчасова функція cubic-bezier (кубічна-Безьє). Ця тимчасова функція додає стрілкою невеликий відскік.

Годинники в стилі iOS 7

Я великий шанувальник мінімалізму годин, використаних в iOS 7 у Apple. З тих пір вони збільшили довжину стрілок, але мені подобається більше коротка версія.

Задавши стиль стрільцям і додавши фон з цифрами, ми можемо з легкістю відтворити цей образ.

Сам по собі цей дизайн є еволюцією Швейцарських залізничних годинників Ганса Хільфікера. Трохи змінивши стиль і додавши нове фонове зображення, ми можемо адаптувати наші годинник під цей стиль.

Якщо ви придумаєте інші варіанти, Дайте мені знати .

Використання Moment.js

Однією з ідей, що з'явилися, коли я вирішив написати цей пост, було відтворення образу годин в готелі, коли троє годин показують різні часові пояси.

Найпростішим способом налаштувати годинник на різні часові пояси є використання чудової бібліотеки Moment.js Timezone .

Роботу цього коду ви можете побачити на Codepen .

підтримка браузерами

Сучасні браузери вміють працювати з використаними в цій статті CSS-переходами і анімаціями. IE10 +, останні версії Chrome і Firefox підтримують їх без префіксів, а Safari вимагає префікса -webkit.

Не забувайте використовувати властивості з префіксами і в JavaScript.

PS Це теж може бути цікаво: