Урок "Анімаційні ефекти"

Тема уроку: Анімаційні ефекти

Мета уроку:

Навчальна. Сформувати знання учнів щодо анімаційних ефектів у веб-середовищі; сформувати в учнів поняття про анімаційні ефекти; формувати науковий світогляд та діалектичне мислення.

Розвивальна. Розвивати творчий підхід до навчання як засіб виховання стійкого інтересу до предмета.

Виховна. Виховувати уважність, зібраність, спостережливість.

Тип уроку: Урок засвоєння нових знань.

Хід уроку

І. ОРГАНІЗАЦІЙНИЙ ЕТАП

II. АКТУАЛІЗАЦІЯ ОПОРНИХ ЗНАНЬ ТА ВМІНЬ

Дайте відповідь на запитання:

1) Які графічні формати та якими командами мови розмітки відображаються?

2) Що таке скрін-рідер? Для чого він призначений?

3) Які обов’язкові атрибути має тег для відображення графічних об’єктів на веб-сторінці?

4) Які стилі використовують для відображення графічного об'єкта на веб-сторінці?

5) Обґрунтуйте використання атрибутів ширини та висоти зображення.

6) Який вид комп'ютерної графіки краще використовувати для фотографій?

IІІ. ВИВЧЕННЯ НОВОГО МАТЕРІАЛУ

Анімація є одним із трендів у дизайні веб-інтерфейсів, вона вже давно стала невід’ємною частиною кожного сайта. Анімаційні ефекти можна застосовувати, як до окремих об'єктів, так і до зображень. Сучасні можливості анімації дозволяють зробити найрізноманітніші слайдери: на повний екран, з 3D-ефектами, адаптивні (які переглядаються з будь-яких мобільних пристроїв) та ін.

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

Перший варіант (найпростіший), який ми розглянемо, - анімовані об’єкти. Це окремі зображення і об’єкти, які показуються користувачеві. Наприклад, курсор, що рухається, плаваюча кнопка «вгору», кнопки заклику до дії, зміна кольору тощо.

Другий варіант - анімовані зображення (наприклад, рекламні банери на сайті). Вони можуть вести на внутрішні сторінки, блог, перенаправляти відвідувача на інший сайт. Ще один приклад - слайд-шоу з фотографій. Анімаційні ефекти можна створювати як виключно засобами каскадних таблиць стилів, так і за допомогою JavaScript. CSS-анімація робить можливим анімацію переходів (transitions) з однієї конфігурації CSS-стилю до іншої. Анімація складаються з двох компонентів, а саме: зі стилю, котрий описує CSS-анімацію, та набору ключових кадрів (keyframes), які задають початковий і кінцевий стани стилю анімації (також є можливість задання точок проміжного стану).

Існує не менше сотні різноманітних плагінів та бібліотек для роботи з CSS-анімацією. Розглянемо лише декілька з них.

Animate.css - це фундаментальна бібліотека анімацій, сумісних з усіма браузерами та відповідних для безлічі завдань. Вона містить всі - від класичних підскакувань до останніх новинок і унікальних ефектів - і здатна задовольнити потреби практично будь-якого проекту.

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

CSS-Animate - це простий майданчик для написання робочого коду для будь-якої анімації. Достатньо задати ім’я, клас, властивості анімації і фрейму, і можна керувати часовою послідовністю і додавати маркери. Одне слово, налаштувати все необхідне для створення стандартної анімації, заснованої на ключовому кадрі.

ІV. ЗАКРІПЛЕННЯ НОВИХ ЗНАНЬ І ВМІНЬ

Перегляньте відео на YouTube. Спробуйте створити просту анімацію за інструкцією. Дослідіть запропоновані плагіни, створіть засобами табличного процесора порівняльну таблицю характеристик.

Результат надішліть на електронну пошту вчителю.

V. ПІДБИТТЯ ПІДСУМКІВ УРОКУ

Бесіда за питаннями:

1) Наведіть приклади анімації на веб-сторінці.

2) Якими засобами можна створювати анімації?

3) Опишіть послідовність команд у  CSS для створення анімації.

VI. Домашнє завдання

Опрацювати § 11.13 (сторінки 190-193) підручника Інформатика для 11 класу (автори Руденко В. Д, Речич Н. В., Потієнко В. О.)

Список використаної літератури для складання уроку:

1. Пасічник О.Г. Основи веб-дизайну: [пос.] / О.Г. Пасічник, О.В. Пасічник, І.В. Стеценко. - К.: BHV, 2009. - 333 с.

2. Руденко В. Д. Інформатика (профільний рівень): підруч. для 11 кл. закл. загал. серед. освіти / В. Д. Руденко, Н. В. Речич, В. О. Потієнко. - Харків: Вид-во «Ранок», 2019. - 256 c. : іл.

3. Слюсаренко В. В. Інтернет-технології та веб-дизайн: Навчально-методичний посібник. - Кропивницький: Видавництво ТОВ «КОД», 2018. - 104 с.

4. Томашевський О.М. Інформаційні технології та моделювання бізнеспроцесів: [навч. посіб.] / О.М. Томашевський, Г.Г. Цегелик, М.Б. Вітер, В.І. Дубук. - К.: Центр учб. л-ри, 2012. - 296 с.