{"id":6989,"title":"\u0418\u0433\u0440\u0430: \u043f\u043e\u0441\u0442\u0440\u043e\u0439\u0442\u0435 \u0431\u0430\u0448\u043d\u044e \u0438 \u0432\u044b\u0438\u0433\u0440\u0430\u0439\u0442\u0435 Xbox","url":"\/redirect?component=advertising&id=6989&url=https:\/\/tjournal.ru\/special\/combo&placeBit=1&hash=627d500a510abab1e3050cd0015144081f494f2e91684708c5c1f136eca35455","isPaidAndBannersEnabled":false}
Дизайн
Anastasia Fedorova

Работа с масками в 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.

{ "author_name": "Anastasia Fedorova", "author_type": "self", "tags": ["principleformac","principle","motion","masking","design","animation"], "comments": 0, "likes": 2, "favorites": 14, "is_advertisement": false, "subsite_label": "design", "id": 55903, "is_wide": true, "is_ugc": true, "date": "Fri, 18 Jan 2019 16:31:27 +0300", "is_special": false }
0
0 комментариев
Популярные
По порядку
Читать все 0 комментариев
Дефицит цифровых кадров в России и их подготовка

Весь мир переходит в цифровую среду. Пока в ежегодном глобальном рейтинге конкурентоспособности Россия занимает 43-е место, но задерживаться на нем не намерена. Для этого правительство запустило программу «Цифровая экономика РФ», которая будет поддерживать цифровую экономику в стране и подготовку необходимых кадров.

Когда устал вечером в Додо

Заказал пиццу и залипаю на то как ее готовят, и тут внезапно девушка начинает рисовать на раскатке и писать надписи, снова зашел через пару минут и тут...

Может ли Тинькофф распоряжаться вашими ценными бумагами

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

Onboarding как отражение продукта
Лекарство или яд: самые интересные исследования про алкоголь Статьи редакции

Материал издания Reminder.

Будущее наступит во вторник на OneRetailConf
8 правил для обучения Руководителей продаж

Автор : Кристина Суходольская специально для хлеб, вода и два процента

Сотрудник М.Видео: «Лучше не берите»

Или как М.Видео и Эльдорадо продаёт вам витринные образцы за полную цену.

В МВД и Минтрансе разработали ПДД для электросамокатов и других средств индивидуальной мобильности Статьи редакции

Россияне смогут ездить на скорости до 25 км/ч при весе устройств не более 35 килограммов.

Объявлены победители Finlanding
«Spotify: История продукта». Как мы разработали алгоритмы музыкальных рекомендаций

Из онлайн-библиотеки — в сервис персонализированных рекомендаций.

null