Від автора: в одній зі статей я розповідав про функцію steps() в CSS-анімації і показав простенький приклад її застосування (переміщення секундної стрілки в годинниках). Подібну техніку можна застосувати і до більш складної адаптивної анімації, наприклад, для створення мультика з зацикленим йде чоловічком.
Стек
У звичайній мультиплікаційної ефект анімації руху створюється шляхом швидкого показу серії послідовних малюнків. У процесі проектування та створення малюнки складаються в стопку, як в цибулині, що дозволяє художнику швидко їх порівнювати. Те ж саме можна зробити, розташувавши малюнки на різних шарах в сучасному графічному редакторі зразок Adobe Illustrator, як на малюнку 1:
Малюнок 1: Складені в стопку малюнки
Зверніть увагу, що в процесі анімації рухаються всі частини малюнка: приміром, голова чоловічка погойдується злегка вгору і вниз, надаючи руху малюнку.
Я експортують малюнки в SVG, щоб скористатися перевагою даного формату (кінцевий розмір оптимізованого файлу трохи більше 13Кб) – низькою вагою файлу. Подібну техніку можна використовувати і з растровими зображеннями.
Ходьба
Трохи змінимо метод: окремі малюнки розташуємо горизонтально на зразок плівки діафільму, малюнок 2:
Малюнок 2: Малюнки розташовані в однакові кадри
Послідовність не змінилася, тільки тепер малюнки читаються зліва направо.
Щоб розташувати малюнки горизонтально в Illustrator необхідно вибрати всі об’єкти на шарах і виконати Object / Transform / Move. Значення збільшуються і повинні бути кратні значення вихідної ширини полотна.
Полотно розшириться для розташування малюнків в горизонтальному напрямку. Кожен кадр займає 250 х 320 пікселів.
Крок
Наше наступне завдання – швидко послідовно рухати зображення, як на плівці фільму. В ідеалі потрібно анімувати viewBox і переміщати його від кадру до кадру, але, на жаль, поки що ми не можемо робити цього за допомогою CSS. Тому ми створимо контейнер з співвідношенням сторін одного з малюнків, додамо в нього порожній блок, до якого застосовується SVG з допомогою властивості background-image:
#walk-container {
display: inline-block;
position: relative;
width: 20%;
padding-bottom: 30%;
vertical-align: middle;
}
#walk-container > div {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url(walk-sequence.svg);
background-repeat: no-repeat;
}
Так вийшло, що техніка контейнер в контейнері так само підходить для створення адаптивного SVG у IE9 — 11. За замовчуванням всередині контейнера буде видна вся SVG плівка. Необхідно збільшити зображення, щоб у рамку залазив тільки один кадр. Потрібне нам значення – кількість кадрів, помножене на 100 і виражене у відсотках:
#walk-container > div {
background-size: 800%;
}
Тепер необхідно рухати плівку всередині обмеженого простору #walk-container. Тобто нам потрібно рухатися до кінця плівки, це можна зробити за допомогою CSS keyframe анімації шляхом зміни позиції фонового малюнка:
@keyframes walkanim {
to { background-position: 100% 0; }
}
Запустити анімацію можна з допомогою:
#walk-container > div {
animation: walkanim 2s infinite;
}
Результат дещо не той, що ми хотіли. Плівка рухається всередині контейнера.
Ходьба на місці
Нам необхідно домогтися миттєвої анімації між кадрами. Для цього нам буде потрібно розбити анімацію на окремі кроки. Тобто кожен кадр буде показуватися тільки один раз без плавних переходів між кадрами. Виклик нашої анімації вище потрібно змінити:
#walk-container > div {
animation: walkanim 1.4 s infinite steps(7);
}
Зверніть увагу, що кількість кроків менше кількості кадрів. Тривалість анімації залежить від кількості кадрів у плівці, з нею доведеться поекспериментувати.
Йдемо далі
На даний момент у нас фігурка, марширующая на місці. Додати відчуття руху можна, якщо переміщати фон разом з персонажем – уявіть собі звичайний суботній ранковий мультик – але в нашому випадку нам необхідно, щоб персонаж йшов від лівого краю до правого по всій ширині екрану. Для цього нам потрібно поєднати нашу анімацію з іншою технікою. Нова анімацію за допомогою властивості translate буде змінювати зовнішній контейнер у відсотках:
@keyframes stroll {
from { transform: translateX(-100%); }
to { transform: translateX(500%); }
}
Час трансформації буде залежати від того, як ви хочете анімувати малюнок: дуже швидко – тоді буде здаватися, що малюнки рухаються з шаленою швидкістю або надто повільно – тоді буде здаватися, що ноги чоловічка прилипають до підлоги, як до льоду.
#walk-container {
animation: stroll 60s linear infinite;
}
Я не хотів, щоб наш чоловічок смикався на початку анімації або навпаки сповільнювався в кінці, тому я використовував лінійну easing функцію анімації.
Висновок
Як тільки ви зрозумієте принцип роботи даного методу, ви зможете використовувати для створення самої різноманітної складної анімації на веб-сторінках. Про це я розповім в наступних статтях.
