Принцип программа для анимации

Содержание

приложения. Проекты вроде Lottie показывают растущую важность добавления движений, это новый элемент создания улучшенных UX для приложений и вебсайтов. В этом уроке вы научитесь эффективным приемам UI-анимации с помощью Principle для Mac. После

того, как вы пройдете это руководство, вы сможете превратить скучные статичные

Principle
Sketch
Файл-исходник для этого урока

Обзор интерфейса Principle

Если вы работаете в Mac OS, интерфейс Principle будет вам очень знаком. В нем три

основных раздела: боковая панель, область дизайна с артбордами и окно превью,

которое можно двигать и ресайзить.

Понимание базовых принципов анимации в Principle

В Principle относительно просто анимировать. Вам не нужна большая база знаний для старта. Большая часть трудной работы автоматизирована, так что вам остается просто сфокусироваться на том, с чего начинается анимация (например, кнопка, ссылка, событие скролла), как она начинается, и чем она оканчивается.

УРОК [ ПРИНЦИП ПЛАВНОЙ АНИМАЦИИ ] — азы в работе с покадровой анимацией

Чтобы помочь вам, я собрал небольшой лексикон терминов, использованных в этом уроке:

Компонент: это вид группировки, который помогает контейнировать элементы и даже анимации. Это аналог смарт-объекта в Photoshop или символа в Illustrator.
Триггер: способ начала анимации — т.е. касание, скролл, ховер и т.д.. В Principle триггер можно задать, выделив любой элемент внутри Principle и кликнув на иконку в виде вспышки молнии, которая появляется справа.
Переход: изменение состояния с одного артборда на другое, т.е. слайд-эффект влево или вправо.
Смягчающий эффект: степень мягкости перехода на основе того, как анимация начинается и кончается.

A. Триггер и переход

Первый шаг в анимировании с Principle заключается в настройке триггера (поведение или действие, с которого начинается анимация) на элементе (кнопка, ссылка, например), или в смене его начального и/или конечного состояния (т.е. его положение или масштаб от начала и до конца анимации).

Задайте начальное состояние: как ваши элементы UI выглядят в начале перед тем, как стартует анимация.
Задайте триггер: выберите элемент взаимодействия, а также действие, которое запускает анимацию.
Определите конечное состояние: как элементы отображаются в конце анимации.

Как только вы настроили анимацию, можете просмотреть ее в окне превью.

В. Длительность анимации и смягчающий эффект

По умолчанию Principle создает полусекундные анимации. Иногда этого недостаточно, чтобы в деталях увидеть эффект перехода. Вы можете изменить длительность и “смягчающий” эффект в панели анимации, следуя этим шагам:

Откройте панель анимации: выделите черные стрелки между двумя артбордами, и нажмите кнопку “Animate” в верхней панели.
Увеличьте длительность анимации: передвиньте концы синих линий.
Примените смягчение: выделите все точки в форме ромбов и выберите “Ease Both” из выпадающего списка, чтобы смягчить переходы.

Что получится?

Это видео показывает, что вы сможете делать после освоения урока. Демо-приложение демонстрирует цветовую палитру Google Material Design, и предоставляет детали по каждому цвету, когда вы выберите какой-то оттенок. Вы сможете создавать анимацию загрузки, переходы между страницами с плавным parallax-эффектом, а также слайдер меню.

12 принципов анимации. Русская озвучка. (Все серии)

Скачайте бесплатный файл-исходник для урока здесь. Начнем.

Переходим из Sketch-файла в Principle

Передвиньте артборды в порядке переходов между ними. Например, при листании экрана справа следующий экран должен касаться правого края предыдущего экрана, который он заменит после анимации.
Когда вы все настроили в Sketch-файле, перейдите в Principle, создайте пустой документ размером 360×640 и кликните кнопку Import.

Удаление шапок экранов для бесшовного скроллинга

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

Создание анимации загрузки — фигуры

Выделите группу фигур загрузки, и нажмите на “Create Component”, содержащий фигуры и текст загрузки. Создайте компонент для текста с первым символом; мы проанимируем текст отдельно.
Выделите сгруппированные фигуры. Выберите триггер “Tap” и перетащите его поверх того же артборда, чтобы создать дубликат.
Второй артборд представляет конечное состояние анимации, и вы можете повернуть группу, используя параметр угла. Задайте другие значения угла для заливки и контура, чтобы создать более интересный эффект.
В завершение, выделите стрелки между артбордами, кликните “Animate”, чтобы открыть панель анимации, и измените длительность до 1.00 секунды.

Создание анимации загрузки — текст

Сначала создайте slide-up анимацию. Выделите фигуру кнопки, и примените триггер “Tap”. В новом артборде подвиньте все экраны вверх на 640px (именно такая сейчас высота артборда).
Теперь создадим параллакс-эффект. Перейдите на предыдущий артборд, или на приветственный экран, подвиньте геометрические фигуры и текст вниз на разные значения Y.
Наконец, внутри панели анимации, увеличьте длительность, скажем, до 1 с. Примените эффект “Ease Both” к временной прямой (предварительно проверьте, что все точки в форме ромба выделены, и кликните на любую синюю линию, чтобы применить эффект ко всем).
Просмотрите анимацию и подвиньте фигуры так, чтобы параллакс-эффект выглядел хорошо.

Создание parallax-эффекта cтраницы приветствия

Выделите компонент загрузки и примените триггер “Tap”, потянув стрелку от него в любое место артборда.
Выделите все экраны (из основной группы) и подвиньте их вверх на 640px.
Вернитесь на предыдущий артборд, подвиньте фигуры на приветственном экране вниз. Это создаст асинхронный эффект листания (это и есть параллакс).
Настройте анимацию добавлением времени на переход в панели анимации: выделите стрелку между артбордами, передвиньте точки синих линий на 1с.

Создание parallax-эффекта — страница About

Выделите кнопку в виде стрелки вниз (убедитесь, что выделяете всю группу) и примените триггер “Tap”, потянув стрелку от него на любое место артборда.
Выделите все экраны (из основной группы) и передвиньте их на 640px.
Вернитесь на предыдущий артборд, подвиньте фигуры на экране “About” вниз. Это создаст асинхронный эффект листания, т.е. параллакс.

Создание Parallax-эффекта — Страница Colors

Примените триггер “Tap” к кнопке в виде стрелки вниз (вся группа должна быть выделена), это создаст новый артборд.
На новом артборде выделите все экраны и сдвиньте их вверх на 640 px.
На предыдущем артборде подвиньте цвета и текст вниз. Помните: чем ниже вы двигаете объект, тем дольше придется двигаться вверх, так что используйте разное расположение объектов для создания более динамичного эффекта.
Откройте меню анимации, примените эффект “ease both” на все синие временные полосы внутри панели анимации.

Листание вбок — страница выбора цвета

Примените триггер “Tap” на кнопку “Load More” на экране “Colours”.
На новом артборде подвиньте контент “Colours” и “Selection” на 360px влево (ширина артборда).
Вернитесь на предыдущий артборд и подвиньте контент экрана в обратном направлении — вправо.
Помните, что вы также можете анимировать непрозрачность экрана, от 0 до 100%.
Поэкспериментируйте с длительностью анимации и эффектом смягчения для достижения нужного перехода.

Анимация иконки меню

Любой слой или фигура, в котором были эффекты в исходнике Sketch (например, тени) импортируются в Principle как изображение. Если нужно редактировать фигуры внутри Principle, попытайтесь не добавлять никаких спецэффектов до импорта.
Используя существующую иконку как ориентир, нарисуйте три тонких прямоугольника, и сгруппируйте их для создания иконки гамбургер-меню. Вы можете удалить или скрыть предыдущую иконку меню.
Выделите новую иконку и примените к ней триггер “tap”.
В новом артборде поверните верхний и нижний прямоугольник иконки меню, они должны быть выровнены по центру, и задайте 0% непрозрачности среднему.
Чтобы увидеть только что созданную анимацию, соедините измененную иконку меню с артбордом превью через триггер “Tap” и протестируйте.

Создание эффекта листания меню

На артборде конечного состояния передвиньте все экраны вправо, пока ссылки меню не будут выровнены по левому краю закрывающей иконки меню.
Выделите все внутри папки “Colors”, кроме содержимого меню, и светло-серый фон, уменьшите непрозрачность до 25%. Анимация будет затенять контент страницы, фокусируя пользователя на меню.
Увеличьте длительность анимации, перейдите на предыдущий артборд, чтобы немного передвинуть контент меню для создания плавного эффекта.

Сдвиг страницы контактов

В открытом меню примените триггер “Tap” на кнопку “Contact Us”.
На только что созданном артборде подвиньте все экраны вверх на 640 px.
Вернитесь назад на артборд превью и подвиньте элементы из страницы “Form” вниз.
Передвиньте элементы на разные значения Y, чтобы создать параллакс-эффект.
Наконец, выделите стрелки между артбордами, увеличьте длину анимации и примените эффект “Ease Both” к синим временным полоскам.

И, наконец, страница Thank You

Примените триггер “Tap” к кнопке “send message”.
На новом артборде подвиньте все экраны вверх на 640 px.
Перейдите на предыдущий артборд и подвиньте элементы из страницы “Confirmation” вниз.
Поиграйтесь с настройками масштаба и поворота для цветной иконки, чтобы создать более динамичный эффект.
Не забудьте увеличить длительность анимации для лучшего восприятия эффекта перехода.

Простота добавления анимаций в Principle

Principle — это фантастический инструмент для реализации ваших идей по анимированию пользовательских интерфейсов.

Его интерфейс полностью в стиле Mac, и он был создан для идеальной совместимости со Sketch-файлами.

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

Как ваши впечатления от урока и самой программы? Делитесь фидбеком в

Источник: ux.pub

Principle: инструмент для прототипирования, который вы должны попробовать

От переводчика
Principle — приложение для Mac OS, которое позволяет в два счета создать анимацию элементов пользовательского интерфейса и сгенерировать его интерактивный прототип. Будь то многоэкранное приложение или просто придуманный вами контрол, так просто и быстро реализовать это раньше не позволял ни один сервис. Бенжамин Бергер — бета-тестер ранней версии Principle, описал свой опыт в статье на Medium, где рассказал о первых впечатлениях и привел пару наглядных примеров использования.

———

Вот уже 5 месяцев прошло с тех пор как Даниель Купер показал мне его новый продукт. Тогда он дал мне потрясающую возможность стать бета-тестером ранней версии Principe. До этого я долгое врем искал способ, который бы дал мне возможность быстро оживить дизайн и при этом иметь возможность взаимодействовать с ним.

Я работал с After Effects
Это требовало серьезных временных затрат, выглядело не очень удобно и, по большому счету, было вообще нереально. Я потратил огромное количество времени, работая с кривыми, чтобы добиться идеально гладкой анимации, которую разработчики никогда бы не смогли воспроизвести.

Я пробовал Pixate и Atomic.io
Но так и не разобрался с ними, потому что их интерфейс не очень привычен. Они требуют некоторой практики и времени (которого у меня нет), чтобы понять как они работают. Так что я удалил их, впустую потратив свой 30-дневный триал.

У меня не пошло с Framer.js
Я не очень хорош в программировании. Мне кажется, если ты можешь написать код, чтобы создать прототип, тогда ты способен выучить реальный язык и потратить некоторое время на самостоятельную разработку. (Я преувеличиваю здесь, я знаю, что Framer имеет свои фишки, но все же.)

Origami слишком большой, чтобы разобраться в нем
Многие дизайнеры считают его крутым. И я согласен, это выглядит очень мощно и эффективно, особенно большое комьюнити, где люди делятся своими знаниями. Но сама среда не очень близка мне, поэтому я не стал продолжать.

Proto.io потерял меня из-за окна предварительного просмотра
Это очень мощный инструмент, но тот факт, что вам нужно сохранять и перезагружать ваш прототип всякий раз, как вы внесли изменения, стал решающим моментом не в его пользу. Хотя у него есть действительно интересные возможности.

Изучать новые продукты бывает немного лень, не так ли?
Я предпочитаю работать с визуальными средами. И зачастую, использование разных приложений становится контрпродуктивно, если они не используют одни и те же концепции, названия и элементы интерфейса. (Я говорю это тебе Adobe. Как может клавиша T в AE использоваться не для инструмента Текст?)

Мой священный грааль называется Principle
Этот продукт — умный микс между Sketch, Keynote, Flash и After Effects (плюс некоторые крутые возможности для интерактивных прототипов). Что меня поразило в первый момент, все кажется очень знакомым. Если вы работали со Sketch, вы без труда разберетесь с Principle: инспектор, список слоев, артборды.

Как это работает?
1. Вы создаете или импортируете ваш набор элементов интерфейса.

2. Выбираете элемент и способ взаимодействия.

Здесь выделен большой синий прямоугольник. Я выбираю способ взаимодействия — тап по элементу.

3. Автоматически создается копия вашего артборда, где вы можете изменить любой компонент.

4. Для каждого изменения автоматически будут сгенерированы транзишены, и вы уже сможете поиграть со своим прототипом.

Это позволяет чертовски быстро и просто создавать сложные переходы.

Чем так хороши артборды в процессе прототипирования?
Однажды я прочитал, что анимация интерфейса подобна хореографии. Холст это сцена, контролы — танцоры. Любая анимация должна иметь смысл. Артборды здесь подходят лучше всего, так как у вас есть возможность видеть каждый экран и каждое состояние вашего приложения, а также то, как элементы интерфейса будут реагировать на него.

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

Интерактивность
Этот инструмент был разработан в основном для устройств с тач экранами, поэтому он позволяет определить множество типов взаимодействия: тап, драгэнддроп, скролл, долгое нажатие.

Панель анимации
Что общего имеют все статьи об анимации? Они настоятельно рекомендуют никогда не делать анимацию линейной, потому что ее не существует в реальном мире. И здесь Principle снова на высоте. По умолчанию к каждой анимации будет применяться easy-in/easy-out эффект, который вы можете легко перенастроить самостоятельно.

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

Панель анимации расположена в самом низу экрана, там вы можете контролировать каждую анимацию (совсем как в After Effects, только в 10 раз быстрее).

Это превью анимации с различными настройками.

Драйвер-панель
Чтобы полностью понять, как работает эта функция, потребуется время. Но разобравшись с ней, вы сможете делать удивительные вещи с вашим прототипом. Обычно драйвер используется на скролл или событие перемещения, чтобы связать несколько элементов или повесить несколько обработчиков на один элемент. Скажем, вы хотите, чтобы появлялся перекрывающий слой, когда вы тяните элемент, или чтобы какой-нибудь элемент вращался во время свайпа (как в Tinder, Jelly).

Анимация прототипов с помощью комбо Principle и Figma

Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Делюсь опытом в дизайне на офлайн- и онлайн-платформах с 2017 года: Институт программных систем, godesign.school, онлайн-платформа breezzly.ru и пишу микролекции о дизайне на Яндекс.Кью (226 ответов).

Июн 24, 2020 · 3 мин читать

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

Интеграции Figma и Principle открывает просто безумные возможности по сборке не просто анимашек, а целых интерактивных систем приближенных к реальности (попробуй отличи!), т.е с этим комбо вы можете шлепать продвинутые анимации и воплощать все, что только вам придет в голову (и конечно зайдет юзерам!). А, да. Напомним, что Principle зарелизили в 2015 году, да так, что он сразу ворвался на пьедестал must-have инструментов для ux/ui дизайна. А значит, до интеграции Figma + Principle нужно было просто добраться естественным образом по бэклогу. Такие дела.

Рекомендуем также обратить внимание на курс по Principle, там интересные проекты по прокачке пользовательских сценариев.

Что дает интеграция? Если кратко, вы импортируете свои исходники Figma в Principle, а затем накатываете анимацию поверх. Ну не просто анимацию конечно: прорабатываете микровзаимодействия, вытачиваете микро анимации, настраиваете мягкие переходы, в общем доводите прототип до уровня продакшн-реди. Больше никаких листов A4 в прототипах, ну или клик-клик переходов. Только моушн, только плавность, только текучесть, тягучесть, естественностью и непрерывность ux.

Интересуетесь свежими статьями по продуктовому дизайну (UX/UI)?

В этой статье мы постараемся дать самый полный ответ на вопрос: “Почему же поклонникам Principle ну просто крышу сносит!”. Кто-то говорит, что в нем идеальный баланс сочетания простой + функциональный + мощный. А кто-то считает, что в нем все, что только нужно для создания реалистичных прототипов и кодить не нужно. Сейчас все и посмотрим.

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

Дэниэл Хупер, создатель Principle

«А еще при переключении на инженрное мышление, у вас просто отключается визуальный аппрарат решения задачи. Вытачивать детали и творить чувственно-целое — это разные фазы решения задачи и разные стили мышления».

Дэниэл Хупер, создатель Principle

В Principle простой UI и здесь вам уже все будет знакомо. Интеграция работает крайне просто: открываете Principle и через функцию import вытягиваете нужный дизайн из аккаунта Figma.

Если вам нужно подтюнить дизайн в Figma, то вообще не вопрос. Все изменения оригинального дизайна подхватываются на лету. Попробуйте просто увеличить кнопку и тут уже уведите как она увеличится в Principle. Кстати, анимации тоже все сохранятся. Ничего не слетает.

Ребята в Figma говорят, что интеграция надежно вертится на Figma API, основатель Principle связывался с ними и серьезно попыхтел над докой, чтобы заточить все с инженерой точностью. В общем и API Explorer пригодился и дока, не зря делали!

В общем нам в Figma Principle зашел — это очень удобный инструмент для UI-анимации и моушн-дизайна в интерфейсов, даже для начинающих. Вот держите файлик и попробуйте его в деле. Principle скачать можно вот здесь. А если вы не знакомы с Figma, то рекомендую подобрать курс по Figma и стартовать. Спасибо, что были на связи!

Источник: ux-journal.ru