1 of 12

Анімаційні ефекти

За навчальною програмою 2018 року

Урок 16

10

(11)

2 of 12

Актуалізація опорних знань і життєвого досвіду

Розділ 3 § 16

Пропоную визначити свої асоціації до слова «анімація».

Пропоную організувати диспут з питання:

Чи потрібна анімація для сайта?

10�(11)

3 of 12

Випадки доцільності�використання анімації

Розділ 3 § 16

За допомогою анімації веб-дизайнер передає перехідний процес.

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

10�(11)

4 of 12

Випадки доцільності�використання анімації

Розділ 3 § 16

Зміна інформації на екрані.

Дуже зручно використовувати анімацію у веб-дизайні для відображення декількох інформаційних елементів в одній і тій же області екрану.

Наприклад, відображення пояснень до карти. Коли миша наводиться на певну ділянку карти, в кутку екрану з'являється інформація, що відноситься до цієї ділянки.

10�(11)

5 of 12

Випадки доцільності�використання анімації

Розділ 3 § 16

Відображення об’ємних структур

10�(11)

6 of 12

Випадки доцільності�використання анімації

Розділ 3 § 16

Залучення уваги

Якщо, наприклад, ми хочемо виділити в меню назва сторінки, на якій знаходиться користувач, ми можемо поставити миготливу кнопку. Але "мигнути" вона повинна лише кілька разів. Тільки, щоб звернути увагу користувача на себе. А далі їй достатньо змінити трохи колір.

10�(11)

7 of 12

Типи анімацій

Розділ 3 § 16

Тип анімації і програмного забезпечення, необхідного для її створення визначається в залежності від конкретного призначення веб-сторінки.

GIF-анімація;

Флеш-анімація (дана технологія є застарілою);

Веб-засоби для створення анімацій: CSS і JavaScript;

Анімація за допомогою CSS;

Анімація за допомогою JavaScript.

10�(11)

8 of 12

Анімаційні ефекти

Розділ 3 § 16

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

10�(11)

9 of 12

Запитання для рефлексії

Розділ 3 § 16

Чи можна сказати, що я розуміюся наанімаційних ефектах?

Чи є в мене потреба в самоосвітній діяльності з веб-технологій?

Що на уроці в мене виходило найкраще? Чому?

Чи маю я задоволення від роботи на уроці?

10�(11)

10 of 12

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

Розділ 3 § 16

Розповісти у соціальних мережах про свій досвід застосування анімаційних ефектів. Проаналізувати коментарі та поради друзів.

Запланувати у щоденнику самоосвіти пізнавально-дослідницьку діяльність з питань створення анімації.

10�(11)

11 of 12

Працюємо за комп’ютером

Розділ 3 § 16

10�(11)

12 of 12

Дякую за увагу!

За навчальною програмою 2018 року

Урок 16

10

(11)