Дизайн Anastasia Fedorova
437

Работа с масками в Principle

Практическое руководство по созданию анимации через изменение параметров маски в Principle.

В закладки
Photo by Emanuel Hahn on Unsplash

В каждой новой программе приходится осваивать её инструменты и вникать в различные нюансы. В этой статье расскажу, как в Principle сделать анимацию масок.

Сейчас, когда я уже знаю, как всё работает, эта тема кажется незначительной. Но для тех, кто только начинает работать с Principle, думаю, статья будет полезной.

Итак, начнём. Допустим, мы хотим получиться в итоге что-то такое.

Анимация заливки маски — что мы хотим получить на выходе.

Рекомендую делать эту анимацию через компонент, чтобы не перегружать основную панель слоёв. Но иногда с масками проще работать внутри основных артбордов, всё зависит от задачи.

Для анимации этого блока нам необходимо создать артборд, нарисовать чёрный прямоугольник, выше положить инвертированную белую картинку. Группируем эти объекты (Group 2). Группа, т. е. папка со слоями, и будет маской.

Затем копируем группу, чёрный прямоугольник перекрашиваем в белый, логотип меняем на чёрный. При этом, логотипы естественно должны быть одного размера и располагаться в строго в одном и том же месте. Эти объекты также группируем (Group 1).

Копируем артборд, меняем местами группы, задавая начальную и конечную точки анимации. Теперь перейдём к самим маскам.

Как я говорила выше, в Principle маска — это группа, которая объединяет несколько объектов.

В инспекторе, в верхней левой части экрана, можно менять параметры маски, её размеры, положение и т. д.

Задаём начальный размер маски. Нам нужно, чтобы чёрный логотип на белом фоне (Group 1) перекрывал белый логотип на чёрном фоне (Group 2). То есть маска Group 1 на первом артборде должна иметь ширину, равную нулю (т. е. на старте мы её не видим, но она есть).. Высота при этом остаётся той же, т. к заливка у нас идёт слева направо. Этот параметр можно менять в зависимости от того, как именно вы хотите раскрывать маску. На Artboard 2 размер маски Group 1 нужно задать в соответствии с начальной шириной группы.

Между артбордами задаём автоматическую анимацию через ивент Auto.

Далее на панели анимации внизу экрана настраиваем эффекты появления и скорость. Возвращаемся в основной файл и смотрим, как работает наша анимация в контексте. При необходимости корректируем.

Вот и всё. Если разобраться с природой работы масок в Principle, использовать их становится очень удобно. Это может здорово разнообразить ваши работы.

Оригинал статьи на Medium.

#animation #motion #principle #principleformac #masking #design

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Anastasia Fedorova", "author_type": "self", "tags": ["principleformac","principle","motion","masking","design","animation"], "comments": 0, "likes": 2, "favorites": 12, "is_advertisement": false, "subsite_label": "design", "id": 55903, "is_wide": false, "is_ugc": true, "date": "Fri, 18 Jan 2019 16:31:27 +0300" }
{ "id": 55903, "author_id": 204482, "diff_limit": 1000, "urls": {"diff":"\/comments\/55903\/get","add":"\/comments\/55903\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/55903"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

Комментариев нет 0 комм.

Популярные

По порядку

0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Нейронная сеть научилась читать стихи
голосом Пастернака и смотреть в окно на осень
Подписаться на push-уведомления
{ "page_type": "default" }