Урок51.Растрова анімація. GIF- та WebP-анімації.
Урок51.Растрова анімація. GIF- та WebP-анімації.
Embedded Files
Поділіться своєю думкою про онлайн уроки інформатики. Пройдіть анонімне опитування на головній сторінці сайту
Добрий день, дорогі учні! Сьогодні ми з вами поринемо у захоплюючий світ комп’ютерної анімації, а саме поговоримо про растрову анімацію та її популярні формати – GIF і WebP. Ви, напевно, бачили веселі рухомі картинки в інтернеті, наприклад, на сайтах, у месенджерах чи в рекламі. Чи замислювались ви, як вони створюються? Сьогодні ми не лише дізнаємося, що таке растрова анімація, а й навчимося створювати власні GIF-анімації! Цей урок буде цікавим і практичним, тож готуйтеся до творчої роботи.
Анімація – це не просто розвага. Вона всюди навколо нас: у кіно, рекламі, іграх, навчальних матеріалах. А знання основ створення анімації може стати вашим першим кроком до цікавих професій, таких як дизайнер, розробник ігор чи аніматор. Отже, давайте розпочнемо!
Актуальність і застосування у житті
Чому растрова анімація важлива? По-перше, вона проста у створенні, і для цього не потрібне складне обладнання – достатньо комп’ютера та кількох програм. По-друге, формати GIF і WebP дуже популярні в інтернеті завдяки своїй компактності та зручності. Наприклад, GIF-анімація часто використовується для створення мемів, коротких рекламних банерів чи інструкцій. Уявіть, що ви хочете швидко показати, як правильно зав’язати шнурки, – кілька кадрів у GIF-файлі зроблять це краще, ніж довгий текст!
WebP – це сучасніший формат, який підтримує кращу якість і менший розмір файлів. Його використовують на вебсайтах, щоб сторінки завантажувалися швидше, що особливо важливо для телефонів із повільним інтернетом. Тобто ці знання допоможуть вам не лише розважатися, а й створювати корисний контент для друзів, школи чи навіть майбутньої роботи.
Актуалізація знань учнів
Перед тим, як перейти до нової теми, давайте пригадаємо те, що ви вже знаєте про комп’ютерну графіку. Ось кілька запитань – спробуйте відповісти!
Які види комп’ютерної графіки ви знаєте?
Відповідь: Ми вже говорили про два основні види – растрова і векторна графіка. Растрова складається з пікселів, а векторна – з математичних об’єктів, таких як лінії та криві. Сьогодні ми зосередимося саме на растровій графіці.
Які типи файлів використовуються для збереження растрових зображень?
Відповідь: Ви, мабуть, пам’ятаєте формати JPG, PNG, BMP. А ще є GIF, який може зберігати не лише статичні зображення, а й анімацію. Сьогодні ми додамо до цього списку WebP.
Які програми ви використовували для створення чи редагування зображень?
Відповідь: Напевно, хтось із вас працював у Paint, GIMP чи Krita. Ці програми підходять і для створення анімації, якщо знати, як ними користуватися.
Що таке послідовність зображень?
Відповідь: Це набір картинок, які показуються одна за одною. Якщо їх швидко змінювати, створюється ілюзія руху – саме на цьому базується анімація!
Отже, ви вже маєте базу, на яку ми спиратимемося. Тепер перейдемо до головного – як це працює в растровій анімації.
Основні теоретичні відомості і терміни
Растрова анімація – це вид комп’ютерної анімації, який використовує растрові зображення. Що це означає? Растрове зображення складається з пікселів – маленьких кольорових точок. Коли ми створюємо кілька таких зображень із невеликими змінами (наприклад, зміною положення об’єкта) і показуємо їх швидко одне за одним, виникає ефект руху.
Основні терміни:
Кадр – це одне окреме зображення в анімації. Чим більше кадрів на секунду, тим плавніший рух.
Частота кадрів (FPS) – кількість кадрів, що показуються за секунду. Наприклад, 20 FPS означає 20 кадрів за секунду.
GIF (Graphics Interchange Format) – формат файлу, який підтримує анімацію. Він зберігає кілька кадрів в одному файлі та відтворює їх із заданою швидкістю.
WebP – сучасний формат, який також підтримує анімацію, але має кращу якість і менший розмір порівняно з GIF.
Морфінг – плавний перехід від одного зображення до іншого, хоча в растровій анімації він рідше використовується, ніж у векторній.
Як це працює? Уявіть, що ви малюєте квітку, яка розкривається. Спочатку створюєте кілька картинок: закритий бутон, напіввідкритий, повністю відкритий. Потім завантажуєте їх у спеціальну програму, задаєте час показу кожного кадру (наприклад, 0,2 секунди) – і готово! Програма збереже це як GIF або WebP.
Програми для створення:
Онлайн-сервіси: наприклад, ezgif.com.
Офлайн-програми: PhotoScape X, GIMP, Krita.
GIF популярний через простоту і автоматичне відтворення в браузерах, а WebP – через ефективність і якість. Обидва формати ідеальні для коротких анімацій в інтернеті.
Завдання на практичну роботу
Завдання на практичну роботу
Тепер давайте спробуємо створити власну анімацію! Ось два завдання – оберіть одне або виконайте обидва, якщо встигнете. Вам знадобиться графічний редактор (наприклад, Paint або Krita) та онлайн-сервіс ezgif.com.
GIF-анімація обертання круга
У графічному редакторі намалюйте кольоровий круг (наприклад, червоний).
Створіть 4–5 кадрів, повертаючи круг на невеликий кут у кожному новому зображенні (наприклад, на 45°).
Збережіть кожен кадр як окремий файл у форматі JPG або PNG.
Відкрийте сайт ezgif.com/maker, завантажте файли, установіть тривалість показу кадрів (0,2 с), і збережіть анімацію як GIF.
Назвіть файл "CircleAnimation.gif" і покажіть його мені.
WebP-анімація тексту
У графічному редакторі створіть 5 кадрів із текстом "MOVE". "РУХ"
На кожному кадрі зсувайте текст трохи вправо, а на останньому змініть фон на світло-зелений.
Збережіть кадри як окремі файли.
На ezgif.com завантажте файли, оберіть формат WebP, установіть тривалість 0,3 с, і збережіть як "TextMove.webp".
Працюйте акуратно, експериментуйте з часом показу кадрів і не бійтеся запитувати, якщо щось незрозуміло!
Домашнє завдання
Теорія: Дайте письмові відповіді на запитання:
Чим відрізняється GIF від WebP?
Які переваги має растрова анімація порівняно з векторною?
Практика: Створіть GIF-анімацію з 3–4 кадрів, яка показує рух простого об’єкта (наприклад, стрибаючий м’яч). Використайте будь-який графічний редактор і онлайн-сервіс. Збережіть файл із назвою "HomeworkAnimation.gif" і принесіть на наступний урок.
Дослідження (за бажанням): Знайдіть в інтернеті приклад GIF-анімації (наприклад, у рекламі чи мемах) і опишіть, як, на вашу думку, її створювали (скільки кадрів, який ефект).
Тож бажаю вам успіхів у створенні анімацій! До зустрічі на наступному уроці!
Приклад анімації створений на сайті ezgif.com
У підручнику п. 5.2 сторінка 190
Тестові завдання до теми уроку
Тестові завдання до теми уроку
Тест на тему "Растрова анімація. GIF- та WebP-анімації"
Тест на тему "Растрова анімація. GIF- та WebP-анімації"
(На основі основних теоретичних відомостей)
Запитання з варіантами відповідей та правильними відповідями:
Що таке растрова анімація?
a) Анімація, створена за допомогою математичних моделей
b) Послідовність растрових зображень, що створюють ефект руху
c) Анімація, яка використовує тільки текст
d) Анімація, створена у векторному редакторі
Правильна відповідь: b) Послідовність растрових зображень, що створюють ефект рухуЗ чого складається растрове зображення?
a) З ліній і кривих
b) З пікселів
c) З геометричних фігур
d) З кодів програмування
Правильна відповідь: b) З пікселівЩо потрібно зробити, щоб створити ілюзію руху в растровій анімації?
a) Намалювати одне зображення
b) Швидко змінювати кілька зображень із невеликими змінами
c) Використати лише векторні об’єкти
d) Змінити колір одного зображення
Правильна відповідь: b) Швидко змінювати кілька зображень із невеликими змінамиЯкий термін означає одне окреме зображення в анімації?
a) Піксель
b) Кадр
c) Морфінг
d) Частота
Правильна відповідь: b) КадрЩо таке частота кадрів (FPS)?
a) Розмір зображення в пікселях
b) Кількість кадрів за секунду
c) Час створення анімації
d) Кількість кольорів у кадрі
Правильна відповідь: b) Кількість кадрів за секундуЩо станеться, якщо збільшити FPS у растровій анімації?
a) Анімація стане повільнішою
b) Анімація стане плавнішою
c) Файл стане меншим за розміром
d) Кількість кадрів зменшиться
Правильна відповідь: b) Анімація стане плавнішоюЯкий формат файлу підтримує анімацію і зберігає кілька кадрів в одному файлі?
a) JPG
b) PNG
c) GIF
d) BMP
Правильна відповідь: c) GIFЩо означає абревіатура GIF?
a) Graphics Interchange Format
b) General Image Format
c) Graphic Illustration File
d) Grouped Image Frames
Правильна відповідь: a) Graphics Interchange FormatЯкий формат є сучаснішим за GIF і має менший розмір файлу?
a) PNG
b) WebP
c) BMP
d) TIFF
Правильна відповідь: b) WebPЩо таке морфінг у контексті анімації?
a) Зміна кольору об’єкта
b) Плавний перехід від одного зображення до іншого
c) Збільшення розміру файлу
d) Швидке відтворення кадрів
Правильна відповідь: b) Плавний перехід від одного зображення до іншогоЯка програма є прикладом онлайн-сервісу для створення GIF?
a) Paint
b) ezgif.com
c) Word
d) Excel
Правильна відповідь: b) ezgif.comЯка програма встановлюється на комп’ютер для створення анімації?
a) PhotoScape X
b) Notepad
c) Calculator
d) Browser
Правильна відповідь: a) PhotoScape XЩо потрібно завантажити в програму для створення GIF-анімації?
a) Текстовий файл
b) Набір растрових зображень
c) Один векторний файл
d) Аудіофайл
Правильна відповідь: b) Набір растрових зображеньЯке налаштування задають у програмі для GIF-анімації?
a) Розмір шрифту
b) Тривалість показу кадрів
c) Кількість сторінок
d) Колір фону
Правильна відповідь: b) Тривалість показу кадрівЧому GIF популярний в інтернеті?
a) Через великий розмір файлів
b) Через автоматичне відтворення в браузерах
c) Через складність створення
d) Через використання векторних об’єктів
Правильна відповідь: b) Через автоматичне відтворення в браузерахЯка перевага WebP порівняно з GIF?
a) Більший розмір файлу
b) Краща якість і менший розмір
c) Відсутність анімації
d) Складність відтворення
Правильна відповідь: b) Краща якість і менший розмірЯк можна створити просту GIF-анімацію?
a) Намалювати одне зображення
b) Створити кілька кадрів і об’єднати їх у програмі
c) Записати відео на телефон
d) Використати векторний редактор
Правильна відповідь: b) Створити кілька кадрів і об’єднати їх у програміЯкий ефект досягається при швидкій зміні кадрів?
a) Зміна кольору
b) Ілюзія руху
c) Зменшення розміру файлу
d) Збільшення яскравості
Правильна відповідь: b) Ілюзія рухуЩо потрібно для створення растрової анімації вручну?
a) Графічний редактор і набір кадрів
b) Тільки одна картинка
c) Векторні об’єкти
d) Код програмування
Правильна відповідь: a) Графічний редактор і набір кадрівЯкий формат не підтримує анімацію?
a) GIF
b) WebP
c) JPG
d) Всі підтримують
Правильна відповідь: c) JPGЯк називається процес об’єднання кадрів в анімацію?
a) Редагування
b) Створення анімації
c) Збереження файлу
d) Малювання
Правильна відповідь: b) Створення анімаціїЯке зображення підходить для растрової анімації?
a) Векторне
b) Складене з пікселів
c) Тільки чорно-біле
d) Тривимірне
Правильна відповідь: b) Складене з пікселівЩо впливає на плавність анімації?
a) Розмір файлу
b) Кількість кадрів за секунду
c) Колір об’єктів
d) Тип шрифту
Правильна відповідь: b) Кількість кадрів за секундуЯкий інструмент не потрібен для створення GIF?
a) Графічний редактор
b) Онлайн-сервіс
c) Текстовий редактор
d) Набір зображень
Правильна відповідь: c) Текстовий редакторЧому WebP ефективніший за GIF?
a) Через більшу кількість кадрів
b) Через менший розмір і кращу якість
c) Через складність створення
d) Через відсутність анімації
Правильна відповідь: b) Через менший розмір і кращу якістьЩо можна змінити в налаштуваннях GIF-анімації?
a) Колір тексту
b) Швидкість відтворення кадрів
c) Розмір шрифту
d) Висоту сторінки
Правильна відповідь: b) Швидкість відтворення кадрівЯкий приклад використання GIF в інтернеті?
a) Збереження документів
b) Рекламні банери
c) Текстові файли
d) Музичні треки
Правильна відповідь: b) Рекламні банериЯка програма не підходить для створення анімації?
a) Krita
b) PhotoScape X
c) Notepad
d) ezgif.com
Правильна відповідь: c) NotepadЩо потрібно враховувати при створенні анімації?
a) Кількість кадрів і їх послідовність
b) Тільки розмір файлу
c) Колір фону
d) Назву програми
Правильна відповідь: a) Кількість кадрів і їх послідовністьЯкий формат автоматично відтворюється в браузерах?
a) BMP
b) GIF
c) JPG
d) PNG
Правильна відповідь: b) GIF
Розподіл питань за критеріями груп результатів:
Група результатів 1 (ГР1) "Працює з інформацією, даними, моделями":
Питання, які оцінюють розуміння теоретичних понять, аналіз даних і властивостей анімації:
№ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 15, 16, 18, 20, 22, 23, 25, 27Група результатів 2 (ГР2) "Створює інформаційні продукти":
Питання, пов’язані зі створенням анімації, практичними діями та результатами:
№ 13, 14, 17, 19, 21, 26, 29Група результатів 3 (ГР3) "Працює в цифровому середовищі":
Питання про інструменти, програми та їх використання в цифровому середовищі:
№ 11, 12, 19, 24, 28Група результатів 4 (ГР4) "Безпечно та відповідально працює з інформаційними технологіями":
Питання, які можуть стосуватися правильного вибору інструментів і розуміння їх доцільності (хоча в цьому тесті таких питань менше, вони частково перетинаються):
№ 11, 12, 24
Пояснення перетинів:
Питання № 11, 12, 19, 24 підходять одночасно до ГР3 (робота в цифровому середовищі) і частково до ГР4 (вибір правильних інструментів).
Питання № 19 підходить і до ГР2 (створення продукту), і до ГР3 (використання інструментів).
Таким чином, тест охоплює всі чотири критерії, але з акцентом на ГР1 (теоретичне розуміння) та ГР2 (практичне створення).
Page updated
Google Sites
Report abuse