Работа с масками в Principle
Практическое руководство по созданию анимации через изменение параметров маски в Principle.
В каждой новой программе приходится осваивать её инструменты и вникать в различные нюансы. В этой статье расскажу, как в Principle сделать анимацию масок.
Сейчас, когда я уже знаю, как всё работает, эта тема кажется незначительной. Но для тех, кто только начинает работать с Principle, думаю, статья будет полезной.
Итак, начнём. Допустим, мы хотим получиться в итоге что-то такое.
Рекомендую делать эту анимацию через компонент, чтобы не перегружать основную панель слоёв. Но иногда с масками проще работать внутри основных артбордов, всё зависит от задачи.
Для анимации этого блока нам необходимо создать артборд, нарисовать чёрный прямоугольник, выше положить инвертированную белую картинку. Группируем эти объекты (Group 2). Группа, т. е. папка со слоями, и будет маской.
Затем копируем группу, чёрный прямоугольник перекрашиваем в белый, логотип меняем на чёрный. При этом, логотипы естественно должны быть одного размера и располагаться в строго в одном и том же месте. Эти объекты также группируем (Group 1).
Копируем артборд, меняем местами группы, задавая начальную и конечную точки анимации. Теперь перейдём к самим маскам.
Как я говорила выше, в Principle маска — это группа, которая объединяет несколько объектов.
В инспекторе, в верхней левой части экрана, можно менять параметры маски, её размеры, положение и т. д.
Задаём начальный размер маски. Нам нужно, чтобы чёрный логотип на белом фоне (Group 1) перекрывал белый логотип на чёрном фоне (Group 2). То есть маска Group 1 на первом артборде должна иметь ширину, равную нулю (т. е. на старте мы её не видим, но она есть).. Высота при этом остаётся той же, т. к заливка у нас идёт слева направо. Этот параметр можно менять в зависимости от того, как именно вы хотите раскрывать маску. На Artboard 2 размер маски Group 1 нужно задать в соответствии с начальной шириной группы.
Между артбордами задаём автоматическую анимацию через ивент Auto.
Далее на панели анимации внизу экрана настраиваем эффекты появления и скорость. Возвращаемся в основной файл и смотрим, как работает наша анимация в контексте. При необходимости корректируем.
Вот и всё. Если разобраться с природой работы масок в Principle, использовать их становится очень удобно. Это может здорово разнообразить ваши работы.
Оригинал статьи на Medium.