Анімація, WebReference
Анімація буває двох видів - покадрова анімація та анімація за ключовими кадрами. При покадрової анімації важливим показником є частота кадрів за секунду. Для орієнтиру — у кінотеатрах використовується 24 кадри на секунду, на телебаченні — 25, сучасні камери вміють знімати з частотою 50 і більше кадрів на секунду. Відповідно, щоб зробити мальований ролик тривалістю півхвилини і з частотою 24 кадри, потрібно 720 зображень. Деякі мультиплікатори йдуть на хитрість і, щоб не малювати величезну кількість картинок, скорочують їх число в два рази, при цьому повторюючи кожен кадр двічі.
Анімація з ключових кадрів використовує зовсім інший підхід. Наприклад, нам потрібно зробити переміщення квадрата з однієї точки до іншої. Достатньо задати вихідні, кінцеві координати квадрата та час переміщення. Розрахунок проміжних кадрів бере на себе програма, у нашому випадку браузер, якщо ми говоримо про веб-технології.
Зрозуміло, що це спрощує процес створення анімації, оскільки кількість кадрів істотно скорочується, а всяка рутина обчислюється автоматично. Водночас є й низка обмежень. Наприклад, якщо потрібно зробити рух об'єкта дугою. Просунуті програми на зразок Adobe Flash дозволяють переміщати об'єкти вздовж довільної кривої, але браузери поки сильно поступаються їм у цьому плані. Рух може відбуватися лише лінійно, тому криву ми замінюємо наближеною ламаною. У математиці цей метод називається апроксимацією. Чим більше точок ми поставимо, тим ближче ламана буде до вихідної кривої і тим плавніший рух, але з іншого боку це ускладнює роботу, фактично наближаючи до покадрової анімації. Так що важливо дотримуватися балансу між якістю і витратами праці.
Сама анімація на веб-сторінці робиться здопомогою двох речей. Тривалість анімації, затримка перед виконанням, число повторень та інші параметри вказуються через універсальне властивість animation . А ключові кадри та значення властивостей елемента визначаються правилом @keyframes. Потім вони зв'язуються між собою за допомогою змінної, ім'я для якої ми вигадуємо самі. Схематично це так.
Таким чином, створивши кілька заготовок ключових кадрів, ми можемо їх застосовувати до різних елементів, вказуючи потрібну змінну. Ось наприклад, як зробити плавну появу тексту на екрані (приклад 1).
Приклад 1. Поява тексту
У цьому прикладі ми створюємо елемент із класом fadeIn, до якого застосовується властивість animation зі значенням fadeIn 3s. Це означає, що анімація триватиме три секунди, але що саме відбуватиметься за цей час animation не знає, в його завдання лише входить перенаправлення до @keyframes з ім'ям fadeIn. Усередині @keyframes є два ключові слова - from і to, вони визначають початкове і кінцеве значення властивостей елемента. Тому браузер за три секунди плавно змінює значення opacity з 0 до 1.
Зверніть увагу на префікс-webkit. Браузер Chrome не підтримує оригінальних властивостей, тому доводиться дублювати записи, додаючи цей префікс.
Анімація може бути складною і містити більше двох ключових кадрів, ніж показано в прикладі вище. Тоді ключові кадри вказуються у відсотках часу всієї анімації. 0% - початок анімації, 100% - час її закінчення, 50% - середина і т. д. Якщо якісь ключові кадри мають однаковий стан, їх можна групувати, як показано в прикладі 2.
Приклад 2. Ключові кадри
Ключові слова from та to відповідають 0% і 100%, тому можна вказувати як відсотки, так і ціключові слова, вони взаємозамінні.
Властивість animation
Правило @keyframes визначає набір ключових кадрів і його функції вичерпуються. Що з цим набором робити, до чого його застосовувати і як визначає універсальну властивість animation . Щоб побачити якусь подобу руху, слід задати змінну вказівку на @keyframes і тривалість руху в секундах (s) або мілісекундах (ms).
За замовчуванням анімація триває вказаний час, а потім властивості елемента повертаються у вихідний стан до початку анімації.
Бібліотека animate.css
У більшості випадків анімація застосовується для створення відомих типових ефектів. Чому б у такому разі не скористатися готовими напрацюваннями у цій галузі? Є кілька різних CSS-бібліотек, які достатньо лише підключити до свого сайту та додати до бажаних елементів заданий клас. З таких бібліотек популярними є Animate.css та magic.
Для початку слід завантажити бібліотеку. Є два варіанта.
Далі підключаємо файл animate.css як це робиться з будь-яким іншим стильовим файлом.
Щоб застосувати ефект анімації до бажаного елементу, додаємо до нього два класи - animated і клас з назвою ефекту (список всіх ефектів та їх назви дивимося на сайті). Наприклад, ви бажаєте додати мерехтіння до зображення на сторінці. У HTML записуємо наступне:
Після завантаження сторінки зображення мерехтить і анімація зупиниться. Для нескінченного повторення додайте клас infinite.
За замовчуванням вся анімація animate.css триває одну секунду, збільшити час можна через власний стиль. Якщо потрібно змінити тривалість лише у вибраного ефекту, то використовуйте клас animated.flash, як показано вПриклад 3. Замість flash вкажіть ефект, що застосовується. Для зміни часу у всіх ефектів залиште лише клас animated.
Приклад 3. Використання animate.css
Схожа за принципом бібліотека називається magic. Вона містить трохи інші ефекти, тому на якійсь бібліотеці зупинитися остаточно залежить виключно від вашого вибору. Подивитися анімацію у дії можна на цьому сайті.
Тепер до вибраних елементів додаємо клас magictime та клас з ім'ям вибраного на сайті ефекту (приклад 4). Збільшення тривалості анімації робиться аналогічно, за допомогою якості animation-duration.