Дискретизація за часом: CSS функція steps()

26

Від автора: ще дуже давно я дізнався про цікаву функції steps() в специфікації CSS по анімації. Функція рідко використовується в розробці, і її складно зрозуміти. У своїй останній книзі я поверхнево розповів про цієї функції. Тим не менш, у steps() є кілька чудових способів застосування, а завдяки правильним аналогій зрозуміти принцип її роботи не складе праці.

Дискретний або безперервний рух

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

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

Щоб додати паузи в CSS анімацію, необхідно взяти дві keyframes анімації з однаковою інформацією і розташувати їх одна за одною, розділені тільки часом: приклад можна подивитися в коді мого CSS слайдера. Але якщо keyfram’и різні, то браузер повернеться до плавної анімації елемента.

Quo Vadis

В аналогових наручних годинниках анімацією називається механічне рух: плавне переміщення, нескінченна шкала, як секундна стрілка в ролексі. Ми з вами, напевно, більше знайомі з кварцовим механізмом циферблата: серія окремих дискретних переміщень стрілки. Як відтворити подібний рух в CSS?

За допомогою функції steps()

За допомогою функції steps() ми можемо примусити CSS анімацію «тікати». Хороший приклад – секундна стрілка годинника: повний цикл циферблата займає одну хвилину, тобто ми можемо розділити рух секундної стрілки на 60 кроків. Приклад таких годин ви бачили на початку статті.

@keyframes clocksweep {
to {
transform: rotate(1turn);
}
}
#secondhand {
animation: clocksweep 60s steps(60) infinite;
}

У загальному і цілому, функція steps() стане в нагоді, коли вам потрібно різко рухати елемент між станами без проміжного руху: рух розбивається на кілька заданих кроків. У наступних статтях я продемонструю ще приклади використання steps(). Як окреме значення, функція steps() асоціюється з властивістю animation-timing-function:

animation-timing-function: steps(4);

Початок і кінець

З допомогою додаткових значень start і end можна вказати моменти початку та завершення кроків. Найкраще сенс значень можна зрозуміти на прикладі ритму музики: значення за замовчуванням end означає, що функція steps() буде робити всі рухи «в ритмі»: якщо розбити часовий проміжок на 4 кроки, то рух станеться відразу після выдыхания і буде тривати до кінця:

steps(4, end)

А значення start навпаки означає, що рухи будуть йти «швидше ритму»: на тому ж проміжку часу рух почнеться відразу ж з паузою в кінці.

steps(4, start)