Назад Вперед Зміст

Створення анімації. Метод animate.ПРАКТИЧНА №3

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

Цей метод має таку форму використання: animate(properties [,duration] [,easing] [,complete])

1. Обов'язковий параметр properties містить набір css-властивостей, у яких вказуються фінальні значення.
2. Параметр duration вказує, як довго триватиме зміна прозорості елемента. За замовчуванням його значення дорівнює 400 мілісекунд. Також можна використовувати значення 'slow' і 'fast', які відповідають тривалості ефекту 600 і 200 мілісекунд.
3. Параметр easing приймає назву функції анімації у вигляді рядка. За умовчанням його значення дорівнює "swing".
4. Параметр complete представляє функцію зворотного виклику, що викликається методом після завершення анімації

Щоб виконати більш детальне налаштування анімації, ми можемо використовувати ще одну форму методу animate:

animate(properties, options)

Тут використовується новий параметр - options. У цьому параметрі ми можемо вказати ряд параметрів конфігурації, які будуть використовуватися при анімації. Цей параметр приймає такі опції:

• duration:тривалість анімації. За промовчанням дорівнює 400 мілісекунд

• easing: назва функції плавності анімації. За промовчанням значення 'swing'

• queue: бульове значення, що вказує, чи потрібно помістити анімацію в чергу ефектів. За замовчуванням має значення true, що означає, що анімація міститься у чергу. Якщо ж присвоїти значення false, анімація буде виконуватися негайно.

• specialEasing: об'єкт javascript, який зіставляє анімовані властивості з функціями плавності

• step: функція, що викликається для кожного анімованого властивості кожного елемента, що бере участь в анімації

• progress: функція, що викликається на кожному етапі анімації по одному разу для кожного елемента, незалежно від кількості анімованих властивостей

• complete: функція, що викликається після завершення анімації

• done: функція, що викликається при завершенні анімації

• fail: функція, що викликається при помилці в процесі анімації, якщо анімація не зможе завершитися нормальним шляхом

• always: функція, що викликається після завершення анімації незалежно, завершиться анімація звичайним шляхом або з помилкою

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

Використовуючи анімацію, важливо мати на увазі, що в даному випадку ми можемо використовувати лише ті властивості css, які набувають числові значення, наприклад, ширина та висота. Інші властивості, як, наприклад, кольори фону чи шрифту, ми вже так просто не зможемо використовувати.

Робимо разом:

Завдання: на сторінці собачка та кнопка.

Натискаємо кнопку, випливає блок з віршем.

Натискаємо кнопку ще раз, випливає блок з котами.

1 . Щоб отримати таку сторінку, виконаємо наступну розмітку:

Таблиця стилів та скрипт

Ще дві маленькі вправи для закріплення матеріалу.

У першій вправі навчимося ховати та показувати картинку, а також змусимо її «випаруватися».

Перша сторінка.

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

Друга сторінка.

Назад Вперед Зміст