Урок про растрову та векторну анімацію, формати GIF і WebP, їх властивості та застосування у веб-анімації.
Key Takeaways
- Растрова анімація складається з послідовності растрових зображень з різними інтервалами часу.
- Векторна анімація використовує математичні моделі і ефекти морфінгу для автоматичного створення кадрів.
- Формат GIF широко використовується для веб-анімації, але має обмеження по кольорах і відсутність звуку.
- WebP є сучасним форматом з кращим стисненням і підтримкою більшої кількості кольорів та анімації.
- Для створення векторної анімації потрібні спеціалізовані програми, а не лише векторні редактори.
What the video covers
- Опис основних властивостей растрової та векторної графіки.
- Пояснення відмінностей між растровою та векторною анімацією.
- Растрова анімація як послідовність зображень з різними інтервалами часу.
- Використання спеціальних програмних середовищ для створення анімації.
- Векторна анімація базується на математичних моделях та графічних примітивах.
- Ефекти морфінгу для автоматичного створення проміжних кадрів у векторній анімації.
- Огляд популярних програм для створення векторної анімації (Adobe Animate, Pivot, тощо).
- Формат GIF: історія, властивості, переваги для веб-анімації.
- Формат WebP як сучасна альтернатива GIF з кращим стисненням і підтримкою анімації.
- Домашнє завдання та заклик підписатися на канал для подальшого навчання.
Chapters
- 00:00Вступ та основні питання уроку
- 01:39Растрова анімація та інтервали між кадрами
- 03:24Програмні середовища для створення анімації
- 05:17Векторна анімація та ефекти морфінгу
- 06:28Приклади та програми для векторної анімації
- 07:35Формат GIF: історія та властивості
- 08:36Переваги GIF для веб-анімації
- 09:44Формат WebP як сучасна альтернатива GIF
- 10:43Підсумки та домашнє завдання
Full Transcript — Download SRT & Markdown
Speaker A
[музика] [музика] Урок 48-й. Растрова та векторна анімація. F та веб-анімації. [музика] На початку уроку постарайтесь дати відповіді на такі запитання: які основні властивості зображень растрової графіки? Які основні властивості зображень векторної графіки? У чому основні відмінності растрової графіки від векторної?
Speaker A
У чому полягає морфінг? Растрова анімація використовує растрові графічні зображення, тобто растрова анімація є послідовністю растрових зображень з етапами змінення положення чи форми об'єктів або їх частин, які демонструються через короткі інтервали часу. [музика] Такий набір зображень може бути створений у будь-якому растровому
Speaker A
графічному редакторі або з використанням фото чи кінокамер. В останніх випадках зйомка об'єктів здійснюється із заданими інтервалами часу між кадрами. [музика] Такі інтервали можуть бути як доволі малими, наприклад 0,5 секунди або 20 кадрів за секунду, так і дуже великими. Наприклад, одна година, 10
Speaker A
діб, місяць. Значні за тривалістю інтервали між кадрами використовують для фіксації процесів, що відбуваються повільно: цвітіння квітки, змінення пір року, змінення положення зірок на небосхилі та інші. [музика] У подальшому для створення анімації потрібно використовувати спеціальні програмні середовища, у які
Speaker A
завантажуються створені зображення і розміщуються в певній послідовності, встановлюється тривалість показу кожного із зображень і визначаються інші значення властивостей. [музика] Анімації. Такі програмні середовища можуть зберігати створену анімацію у відеофайлах або файлах графічного формату GIF або веб. [музика] Векторна анімація використовує векторні
Speaker A
графічні зображення, які є сукупністю графічних примітивів. Для створення векторних примітивів використовують математичні моделі геометричних фігур. [музика] Тому у векторній анімації доволі часто використовують ефекти морфінгу з автоматичним створенням проміжних кадрів між заданими користувачем ключовими кадрами. Це значно спрощує деякі операції
Speaker A
під час створення анімації та зменшує затрати часу на малювання кожного кадру анімації. [музика] Наприклад, анімацію руху прямокутника можна задати початковими та кінцевими координатами його вершин, а проміжні положення будуть автоматично визначені з використанням формул, що описують рух цього прямокутника і визначають його
Speaker A
положення через певний інтервал часу. На малюнку початкове та кінцеве положення прямокутника в початковий нуль секунд та кінцевий одна секунда. Час анімації є ключовими [музика] кадрами. Залежно від установленої користувачем кількості кадрів анімації за секунду програма згенерує зображення для проміжних
Speaker A
кадрів. Створити векторну анімацію з використанням тільки інструментів векторного графічного редактора, як правило, неможливо. Зазвичай векторні графічні редактори є складовими програм створення векторної анімації, таких як Adobe Animate, Pivot, [музика] Animator, а також програми SXS, T Type, OpenOns, Sunfix Studio та
Speaker A
інших. Однією з растрових анімацій є анімація, що може бути збереженою в файлах формату GIF. Цей формат був розроблений доволі давно, ще в 1987 році компанією. [музика] Cuserf. Незважаючи на те, що формат розроблено до епохи активного використання інтернету, саме інтернетом і
Speaker A
пов'язано широке використання файлів цього типу. В наш час однією з особливостей файлів формату GIF є зберігання послідовності кадрів в одному файлі та їх відтворення з певною швидкістю для отримання ефекту анімації. При вкладці F файлів ви зараз бачите на
Speaker A
екрані уміст файлів формату GIF відтворюється автоматично практично всіма сучасними браузерами. Для їх відтворення на веб-сторінках не потрібні додаткові інструменти: різноманітні програвачі відео, Adobe Player, Real Player тощо. Тому файли з GIF-анімацією широко використовують для відтворення на сторінках веб-сайтів, наприклад рекламних
Speaker A
[музика] банерів. На відміну від відеофайлів графічні файли з розширенням імені GIF менші за розміром, що суттєво для відтворення веб-сторінок на мобільних пристроях, а також для мереж з невисокою швидкістю доступу до Інтернету. [музика] Ці файли мають такі значення властивостей: кількість кольорів, що може
Speaker A
відтворити, 256; використання властивості прозорий колір для одного з кольорів в палітрі; підтримка анімації; встановлення різної тривалості показу окремих кадрів; так. Додавання звукового супроводу відсутні. У 2010 році компанія Google запропонувала новий формат файлів для зберігання графічних зображень з
Speaker A
підтримкою анімації WebP. Цей формат, на думку розробників, замінить формати GIF, PNG та JPEG, що активно використовуються для розміщення зображень на веб-сторінках. [музика] Як і формат GIF, WebP може зберігати анімацію як послідовність окремих кадрів. Перевагою цього формату є можливість
Speaker A
зберігання зображень з більшою кількістю кольорів порівняно з GIF та нові алгоритми стиснення даних. Домашнє завдання: опрацюй параграф 5.2, це сторінки 190–193 твого підручника. Не забудь підписатися на YouTube-канал "Дистанційне навчання". Ну от і добіг кінця наш урок.
Speaker A
Дякую, що були разом зі мною, що навчалися разом. Не забудьте підписатися на мій канал, натисніть всі оці кнопочки. Мені буде дуже приємно. Давайте навчатися разом. До побачення! [музика]
Topics:растрова анімаціявекторна анімаціяGIF анімаціяWebP форматморфінгграфічні формативекторна графікарастрова графікаанімовані GIFстворення анімації











