Маска Анімація

5 min read

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

Доступні маски анімації

Анімація Ефект Кращий для
Вгору вгору/Down Зміст розкриває зверху або вниз Текстові заголовки, лапки
Wipe лівий/червоний Горизонтальне виявлення Переходи, розкривається
Ірис Коло розширюється з центру Драматичні розкриває, фокус
Ірис з Усадки до центру Випадки, переходи
Стара маска Форма зірки розкриває зміст Грати
Маска для серця Форма серця розкриває зміст Валентина, Романтика теми
Штори Відкриті від центру Етап/театрові ефекти
Діагональ Wipe Кутовий дисплей Динаміка переходів
Кіно Листбокс барів анімація Кіно-стиль intros

Використання шаблонів маски

Найпростіший спосіб використання маски анімації є за допомогою шаблонів:

  1. Відкрийте панель*** (клацніть вкладку шаблонів або натисніть T)
  2. Фільтр за допомогою *Категорія: Маскування
  3. Натисніть шаблон для попереднього перегляду
  4. Натисніть Використовувати шаблон*, щоб застосувати його

Доступні шаблони маскування

Шаблони Опис
Текстовий перегляд Лінії ковзають один за одним
Текстовий перегляд Лінії слайд вниз
Горизонтальний Wipe Зміст протирають зліва
Ірис Ревек Коло розширюється для виявлення
Стара маска Розкрита форма зірки
Маска для серця Виявлена форма серця
Діагональ Wipe Кутовий перехід
Кінотеатр Intro Листівка-стиль

Як Маска Анімація Робота

Анімовані маски працюють за вмістом кліпінгу з формою, яка змінюється з часом:

  1. Mask Shape - Кличка межа (ректкутник, коло, зірка, серце)
  2. Види анімації* - Як маска рухається (фіоп, ірис, вага)
  3. Примітка** - Час початку, тривалість та здачі
  4. Прішення - Який спосіб виявлення відбувається

Параметри вимірювання

  • Старт час* - Коли починається виявлення (в секундах)
  • Duration* - Як довго розкривається
  • Easing* - Вигнута анімація (лінійна, простотаIn, easeOut, easeInOut)

Переміщення тексту

Для мульти-лінійного тексту, перемішуючи час запуску для каскадного ефекту:

Лінія Час початку Ефект
Лінія 1 0.2s Перші пропозиції
Лінія 2 0.35s Відкриваємо другий
Лінія 3 0.5s Відкриває третій

Це створює класичну «лінію-відкриту» видиму в професійній графікі руху.

Комбінація з іншими ефектами

Маска анімація працює добре з:

  • Keyframe анімація* - Перемістити елементи під час виявлення
  • Проста анімація* - Додавання імпульсу або виходу після виявлення
  • Background генератори* - Перегляд вмісту на анімаційних фонах

Маскування зображень (статистика)

Для статичної форми маскування на зображеннях:

  1. Виберіть імпортне зображення
  2. У панелі властивостей натисніть Mask
  3. Виберіть форму (коло, зірка, серце, гексагон тощо)
  4. Налаштування розміру маски та положення
  5. Натисніть Застосувати маску

Це створює постійний урожай до форми (не анімованих).

Поради щодо кращих результатів

  1. Keep показує короткі - 0,4-0.8 секунд найкраще працює
  2. Використання простоти* - Почуття більш натурального для розкриття
  3. Стан послідовно - 0.1-0.2с між лініями
  4. Виміряти вміст* - Використовуйте іриси для драматичних, протирання професіоналам
  5. Погляд на повну швидкість* - Час тестування відчуває право

Маска Режими

Контроль якості форми маски взаємодіє з вашим вмістом:

Режим роботи Ефект Використання Case
Clip (за замовчуванням) Зміст видимий тільки всередині форми маски Стандартний розкривається, обрамлення
Зареєструватися Зміст видимий всюди крім всередині форми маски Вирізати ефекти, отвори
Інтерсек Зміст видно тільки де перекриття маски Ефекти діаграми вен

Щоб змінити режим маски:

  1. Виберіть маскуваний елемент
  2. У панелі властивостей знайдіть режим маски
  3. Subtract****************

Маска Stacking

Застосовувати кілька масок до одного елемента для складних маскування ефектів:

  1. Застосувати початкову маску (наприклад, коло)
  2. Додати другий шар маски з різним режимом:
    • Додати* - Блоки як форми маски (невидимі)
    • Subtract* - Вирізає другу форму з першого
    • Intersect**********************************************************************************************************************************************************************************************************************************************************

Приклад: Коло з Star Cutout

  1. Застосувати маску***** (режим кліпу)
  2. Додати шар маски****
  3. Результат: кругова рама з зірчастим отвором в центрі

ХККСНУМКСК ХККСНУМКСК

Multiple маски комбіновані: маска для кола з зіркою віднімається
ХККСНУМКСК

Ви можете укладати стільки шарів маски, як це потрібно. Видаліть індивідуальні шари без впливу інших.

Vertex Анімація

Анімувати форму маски самостійно шляхом морфування її вершин між двома державами:

  1. Визначте початкову форму маски (посади вершини)
  2. Визначте форму кінцевої маски (випадкові позиції)
  3. Маска плавно морфується між формами під час відтворення

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

ХККСНУМКСК ХККСНУМКСК ХККСНУМКС QThe же елемент з кліпом, відкидкою та режимами маски Intersect ХККСНУМКСК

Технічні Примітки

  • Маски використовують Paper.js кліповані групи внутрішньо
  • Маски на основі ваги (старші, серце) від центру
  • Ректорні маски змінюють розміри для протирання ефектів
  • Маски перебудовані при завантаженні шаблонів
  • Для повного програмного керування див. документацію API для applyCustomMask()

Related: Animations Keyframe Editor Шаблони