Принцип анімації. Редактор двовимірної анімації TupiTube

Опрацюйте теоретичний матеріал:

Анімація — це процес створення ілюзії руху шляхом послідовного відображення зображень або кадрів.

Від самого початку створення анімації, вона стала потужним інструментом для передачі ідей, емоцій та розповіді історій.

Сучасна анімація використовується у кіноіндустрії, комп’ютерних іграх, рекламі, навчанні, наукових дослідженнях та інших сферах.

З появою комп’ютерних програм анімація стала доступною практично кожному, хто має інтерес до цього виду мистецтва.

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

Величину, яка дорівнює кількості кадрів, що демонструються за секунду, називають частотою кадрів. Вимірюють її в кадрах на секунду.

Історія анімації

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

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

Основні види анімації

Існує декілька видів анімації:

• Традиційна анімація — використання кадрів, які малюються вручну.

• Комп’ютерна анімація — створення анімації за допомогою програмного забезпечення.

• Стоп-моушн анімація — процес зйомки фізичних об’єктів, які злегка змінюються між кадрами.

Основні принципи анімації

Існує 12 основних принципів анімації, визначених аніматорами студії Disney. Ці принципи допомагають створювати більш природні, реалістичні та динамічні рухи:

1. Стиснення та розтягування (Squash and Stretch): Надає об'єктам "гумовості", показуючи їхню вагу та еластичність під час деформації.

2. Попередній рух (Anticipation): Підготовчий рух перед основною дією (наприклад, присідання перед стрибком).

3. Сценічність (Staging): Чітка подача ідей, щоб глядач зрозумів, що відбувається.

4. Прямо вперед та від пози до пози (Straight Ahead Action and Pose to Pose): Два підходи до створення руху: безперервний або через ключові кадри.

5. Послідовність дій та накладання (Follow Through and Overlapping Action): Незафіксовані частини тіла продовжують рухатися після зупинки основного об'єкта.

6. Сповільнення на початку та при завершенні (Slow In and Slow Out): Більше кадрів на початку та в кінці руху для плавного переходу.

7. Арки (Arcs): Більшість природних рухів відбувається по дугах.

8. Другорядні дії (Secondary Action): Додаткові рухи, що підкреслюють основну дію.

9. Таймінг (Timing): Визначення кількості кадрів для кожного руху, що впливає на його швидкість.

10. Перебільшення (Exaggeration): Утроєння рухів для більшої виразності.

11. Чіткий малюнок/Пози (Solid Drawing/Solid Posing): Продуманий дизайн та силуети, що зберігають форму.

12. Привабливість (Appeal): Створення харизматичних та цікавих персонажів.

Редактор TupiTube

TupiTube — це безкоштовний програмний засіб для створення двовимірної анімації. Він розроблений з метою бути доступним як для новачків, так і для професіоналів, дозволяючи створювати різноманітні проекти анімації, від простих до більш складних.

Основні особливості TupiTube:

• Підтримка векторної графіки.

• Легкий у використанні інтерфейс.

• Можливість створення ключових кадрів для анімації.

• Інструменти для малювання, переміщення, обертання та масштабування об’єктів.

• Підтримка експорту проектів у популярні формати (GIF, MP4 тощо).

Інтерфейс TupiTube

Інтерфейс програми TupiTube складається з кількох основних частин:

1. Робоча область — місце, де відбувається безпосереднє створення анімації.

2. Таймлайн — хронологічна шкала, яка показує розташування ключових кадрів та дозволяє управляти ними.

3. Панель інструментів — інструменти для малювання, переміщення, обертання та інших операцій з об’єктами.

4. Панель шарів — дозволяє керувати шарами, додавати нові та приховувати існуючі.

5. Панель кольорів — вибір кольорів для малювання та заповнення об’єктів.

   Розгляньмо головне вікно програми. Його вигляд залежить від використовуваного модуля (на рисунку — модуль Анімація):

   

   1 — верхня панель;

   2 — вкладки модулів;

   3 — список режимів модуля;

   4 — рядок меню;

   5 — панель команд модуля;

   6 — панель параметрів інструментів;

   7 — розкривна панель;

   8 — права панель;

   9 — ліва панель;

   10 — лінійки;

   11 — панель інструментів;

   12 — робоче поле;

   13 — рядок стану;

   14 — нижня панель.

   Засоби розроблення анімації зібрано в модулі Анімація. Модуль Програвач дає змогу переглядати створену анімацію в різних режимах.

   Кнопки команд верхньої панелі:

   

   1 — створити новий проєкт;

   2 — відкрити наявний проєкт;

   3 — зберегти проєкт;

   4 — зберегти копію проєкту під іншою назвою;

   5 — закрити проєкт;

   6 — перейти на сайт програми.

Створення проєкту

Щоб розпочати розроблення проєкту, потрібно:

• запустити застосунок TupiTube і натиснути кнопку Новий проєкт,

• у діалоговому вікні Створення нового проєкту (рис.4) ввести його параметри:

  • зі списку Профілі вибрати один із варіантів розмірів полів (X — ширина, Y — висота) і частоти кадрів (кадрів/с),

  • клацнути прямокутник із написом Тло, у діалоговому вікні, що відкриється , вибрати колір тла для кадрів анімації,

• Натиснути кнопку , після чого відкриється вікно програми з модулем Анімація.
  

Практичне завдання: «Анімований лічильник»

Завдання: Створити анімацію, де цифри від 5 до 1 змінюють одна одну.

Інструмент: сайт https://brush.ninja/

Інструкція:

1. Перший кадр (Цифра 5):

   • Відкрийте сайт. Оберіть інструмент "Пензель" (Brush).

   • По центру екрана намалюйте велику цифру 5.

2. Перехід до наступної цифри:

   • Натисніть кнопку "Add" (внизу екрана). З’явиться чистий кадр, але ви побачите блідий слід своєї "п'ятірки" (це функція "кальки").

3. Цифра 4:

   • Намалюйте цифру 4 поверх сліду від попередньої цифри, щоб вона була такого ж розміру і в тому ж місці.

4. Повторення (3, 2, 1):

   • Знову натисніть "Add" і малюйте наступну цифру (3). Повторюйте, поки не дійдете до 1.

   Налаштування швидкості:

   • Натисніть іконку шестерні (налаштування) і встановіть швидкість (Frame rate) приблизно 3-5 FPS. Так цифри не будуть миготіти занадто швидко.

5. Збереження:

   • Натисніть кнопку "Export" -> "Animated GIF".

   • Зачекайте завершення і натисніть "Download".

   Отриманий файл прикріпіть до цього завдання (можна відео екрану зробити)