З появою CSS3-анімацій, HTML-документи стали набагато привабливіше, і розробляти їх стало простіше. Використовуючи правило @keyframes, ви можете легко визначати різні параметри, включаючи розташування і розмір HTML-елемента. Параметр animation, в свою чергу, відповідає за запуск і переміщення ключових кадрів в залежності від певних параметрів. Без необхідності використовувати j # 097; vascript і плагіни, ми можемо без праці створювати навіть найскладніші анімації, які будуть працювати дуже плавно у всіх сучасних браузерах.
Проблеми виникають тоді, коли для розробки CSS3-анімацій вам необхідно використовувати j # 097; vascript. Всі ми знаємо, що j # 097; vascript в більшості випадків - це перша необхідність, яка дозволяє нам обчислювати окремі значення або анімаційний процес в цілому.
Комбінуємо CSS і j # 097; vascript за допомогою нового методу animate ()
Новий j # 097; vascript-метод animate () дозволяє нам управляти анімаціями за допомогою скрипта. Звичайно ж, нам все одно потрібно використовувати цілу пачку CSS-параметрів для визначення наших ключових кадрів.
У наведеному вище прикладі ми прикріплюємо метод animate () до елементу. Усередині квадратних дужок визначається стільки станів заданого параметра, скільки нам потрібно, і в нашому прикладі ми будемо працювати над height. Кожне значення записано в вигляді літери об'єкта, а значення використовуються лише для одного окремого параметра. Комбінації начебто width і height неприпустимі. Врахуйте, що самі значення повинні бути обрамлені цитуванням, і оформлені синтаксисом, що відповідає вимогам j # 097; vascript, а це значить, що потрібно використовувати "backgroundColor" замість "background-color". В іншій букві об'єкта, відразу після закриття квадратних дужок, ми визначаємо подальшу анімацію. Ми хочемо змінити довжину анімацію за допомогою duration, частоту повторень за допомогою iteration і може на розсуд визначити затримку за допомогою параметра delay, - цей параметр визначає момент, коли повинна бути запущена анімація. Всі тимчасові значення вказуються в мілісекундах.
Управляємо набором ключових кадрів і їх тривалістю
Нам потрібно запустити метод animate () окремо від кожного параметра, який нам потрібно змінити. Це означає, що при бажанні змінити як height, так і width, нам потрібно буде повторно запускати animate ().
Ви наведеному вище прикладі ми змінюємо ширину елемента. Ширина повинна змінюватися, починаючи від 0, і піднімаючись до 10 відсотків, а потім завершитися при досягненні 100 відсотків. Все це буде супроводжуватися плавною анімацією, природно. Додатковий параметр offset визначає, що зміни від 0 до 10 відсотків будуть займати 1/3 всього часу, а перехід від 10 до 100 займе 2/3 всього часу анімації. І при цьому всьому, загальна тривалість анімації визначається параметром duration. В даному випадку, перша частина буде відбувається протягом однієї секунди, а друга - на протязі 2.
Замість того, щоб визначати значення у вигляді дробів, ви також можете скористатися десятковими числами. Потрібно використовувати цифри від 0 до 1. Наприклад, замість 1/3 ви можете використовувати 0.33.
Більше опцій для анімації
Якщо ви знайомі з CSS3-параметром animation, то напевно знаєте про те, що метод animate () дозволяє управляти процесом анімації. Ви можете змінювати напрямок, а також швидкість анімації, і її прискорення. Якщо ви хочете вказати, що після закінчення, анімація повинна повернутися до початку, то можете зробити це.
Значення direction містить в собі інформацію про направлення анімації. Якщо ви встановите значення reverse, то анімація буде відтворена в зворотному напрямку. Значення ж alternate дозволить вам відтворити анімацію в стандартному напрямку, а потім в зворотному. А значення alternate-reverse комбінує два останніх значення.
Значення easing дозволяє вам використовувати найпоширеніші функції модифікацій, які вже добре відомі по CSS3, так як там можна зустрічати ease-in, ease-out і так далі. За замовчуванням, кожна анімація налаштована на лінійний хід без прискорення або уповільнення. Значення fill визначає, що буде представлено після закінчення анімації. За замовчуванням, анімація повинна повернутися до стартової точки. При використанні значення forward, анімація зупиниться на останньому ключовому кадрі.
Застосування animate () до змінної дозволяє нам управляти анімацією за допомогою j # 097; vascript. Ми можемо запускати і зупиняти її на власний розсуд.
У нашому прикладі ми прикріплюємо анімацію до змінної animation, як це не дивно. Потім ми прикріплюємо 2 слухача подій до елементів з id animation_start і animation_pause. Ці слухачі подбають про виконання певних функцій при кліці. Play запускає анімацію, pause вже зрозуміло, що робить, а reverse негайно перенесе вас до останнього ключового кадру і повністю зупинить анімацію.
Що далі? Слухачі подій подбають про закінчення анімації
Гей, адже це j # 097; vascript. Звичайно ж, у нас є слухач подій, який дозволяє реагувати на закінчення анімації. Ми можемо реалізувати це за допомогою finish. Усередині finish потрібно визначити відповідну функцію.
У наведеному вище прикладі ми просто запускаємо повідомлення про те, що анімація завершена.
animate () зараз знаходиться на ранній стадії розробки і зараз обтяжена ярликом «experimental». Підтримка цього параметра з'явиться в Chrome, починаючи з 36 версії. Якщо ви хочете випробувати її зараз, то можете завантажити і встановити Chrome Canary.