Кто не любит хорошую карточную анимацию? Ее никогда не бывает много, правда? Это, конечно, чуть более обыденно, чем картина, которая сотрясла не так давно мир своим выходом. Да, в этом туториале мы по полной пройдемся по теме Звездных войн, они вдохновили меня на создание этой карточной анимации в Principle. Я знаю, что среди нас есть юные падаваны в вопросах временных шкал при прототипировании, и часто именно эта часть работы вызывает большие проблемы. Я надеюсь, что этот детальный урок покажет, насколько мощный Principle, и поможет разрешить сложности работы с этим инструментом. Перед началом установите следующие приложения и скачайте такие исходники:
Tutorial Assets (включает файл Sketch для импорта в Principle)
Шрифт San Francisco*
*Можете найти его в папке Tutorial Assets/Fonts. Когда все приложения и исходники на месте, приступим...
Что мы будем создавать?
Вот превью того, над чем вы поработаете в этом уроке…
Начало работы в Principle
Можете оставить все, как есть. Окно Preview* по умолчанию имеет размер iPhone 6, круто. Если у вас не так, просто выберите iPhone 6 из меню Size Presets в инспекторе. Пресеты размеров *При работе над прототипом окно Preview в Principle очень помогает, но ничего не заменит тестирования на устройстве из реального мира, так что я порекомендую установить Principle Mirror из App Store.
Импорт дизайна из Sketch
Откройте исходник в Sketch, кликните на кнопку Import на панели инструментов, выберите импорт в 2x, и кликните Import. Импорт дизайна из Sketch Ваши экраны будут импортированы из Sketch и выровнены по области канваса. Можете кликнуть на каждый экран (появится зеленая граница, показывающая, какой экран вы выделили), и увидеть его в окне превью... Окно превью … в списке слоев вы увидите, что порядок экранов, групп и слоев полностью повторяет оригинальную иерархию из файла Sketch… Иерархия слоев, сохраненная из Sketch Подсказка: Вы увидите, что некоторые слои и группы были сглажены после появления в Principle. К некоторым из них я специально добавил астериск (*) в конец названия слоя/группы. Так проще управлять разными элементами, помогает с размером и скоростью прототипов. Другие группы сгладились потому, что в исходном файле Sketch использовалась маска (например, Header), а Principle сглаживает группы, содержащие маску, так что имейте это в виду. Файл, созданный в Sketch, состоял из 4 артбордов (мне просто нравится так структурировать свои файлы Sketch, так на них проще ссылаться при переходе на стадию прототипирования), но прототип, который мы будем создавать в Principle, происходит внутри одного экрана, где карточки появляются слева и справа, по мере того, как свайпит пользователь. Так что нам понадобится структурировать элементы немного по-другому. Файл Sketch Файл Principle Я покажу, что нужно изменить, вам будет понятнее
Анимация хедеров
У вас 4 экрана с персонажами Rogue One (“Изгой один”). Персонажи карточек Rogue One Первый персонаж, конечно же, Орсон Кренник, и от него пользователь сможет свайпить влево, чтобы отобразить других персонажей. Начав со слоя Header, мы поместим каждый внутрь первого (и вскоре, он станет единственным) экрана. Скопипастьте (Cmd + C и Cmd + V) каждый из хедеров с других 3 экранов в первый, помещая один поверх другого. Перетяните их в список слоев. В списке слоев переставьте их так, чтобы они были в том же порядке, что и на экране. В итоге должно получиться так: Добавление всех слоев Header на первый экран Затем (Shift+клик) выделите все слои Header и (Cmd + G) сгруппируйте их. Используйте (Cmd + R) для переименования группы заголовков. Группа и переименование Теперь скопируйте слои карточек профиля (Profile Card) и слой Background (я его использую исключительно как помощника для выравнивания) на первый экран и корректно выровняйте. Итак, с экрана Джин Эрсо, выделите группу Jyn Card (Cmd + Click) и слой Background ... Выделите группу Card и слой Background Затем скопируйте и вставьте эти элементы в первый экран, и, выделив слой Background, снизьте непрозрачность до 0% в инспекторе. Снизьте непрозрачность в инспекторе до 0% Проделайте то же самое с двумя другими экранами (не забудьте сократить непрозрачность слоев Background до 0, и упорядочить их корректно в списке слоев), пока не получится что-то такое: Организация слоев карточек и фонов С помощью Shift+клик выделите все эти группы и слои, сгруппируйте их (Cmd + G) и переименуйте(Сmd + R) во Views. Переименуйте группу во Views Теперь удалите остальные 3 экрана, они нам больше не понадобятся. Просто выделите их в списке слоев и нажмите Delete. Выделите экраны и удалите их Сгруппируем некоторые элементы и упорядочим список слоев корректно. Во-первых, выделите каждую группу карточек, которую мы скопировали, и соответствующие им слои фона, и сгруппируйте (Cmd + G). Сгруппируйте карточки и слои фона Затем передвигайте группы, пока не получится что-то такое... Реорганизация групп и слоев в списке слоев И, наконец, кликните дважды на названии экрана, измените его на Screen. Изменение названия экрана
Перепланировка карточек
Переместите карточки, которые теперь спрятаны за первой. Выделите вторую карточку (Джин Эрсо) в списке слоев, введите 375 (ширина экрана) в поле X в инспекторе. Так карточка будет помещена прямо рядом с экраном, а сам экран сядет на 0 координату по оси Х. Выравнивание карточки Джин Эрсо Для следующей карточки понадобится немного математики в поле Х. Введите 375*2. Для поля Х опять используйте элементарную математику. Для последней карточки введите значение 375*3. Наконец, все упорядочено на канвасе, как следует. Да, вы можете спросить “А почему бы таким же образом не расположить все сразу в Sketch?”. Действительно, можно так сделать, но как я упоминал раньше, хотя мы собираемся создать взаимодействие только внутри одного экрана, я все равно при создании Sketch-файла предпочитаю иметь полный обзор того, как будут выглядеть мои экраны на завершенных кадрах взаимодействия. Настало время добавить движения в наши труды. Для начала создайте простую анимацию Paging между каждой из карточек. Это супер-просто в Principle. Выделите группу Views в списке слоев, и в Инспекторе выберите Page из горизонтального меню выбора. Настройки постраничного скролла Убедитесь, что скролл-гайды закреплены по правому и левому краям экрана... Закрепление скролл-гайдов Протестируйте скролл, посвайпив карточки в окне превью. Все выглядит хорошо? Просто, эффективно, но все еще не дошлифовано, состояние “Даа, все выглядит хорошо, но…”. Придадим еще немного движения прототипу. Здесь важна плавность, именно эти простые анимации делают UX гораздо более приятным, не оставляя пользователю чувство легкого укачивания при работе с интерфейсом. Подсказка: При использовании превью, просто нажимайте W для рестарта/перезагрузки прототипа.
Вместо того, чтобы предлагать функции конкретно под проходящие тренды дизайна или нишевые юскейсы, Principle предлагает...principleformac.com
Чтобы открыть панель драйверов, просто кликните на кнопке Drivers в тулбаре. Откройте панель драйверов Для начала сконцентрируемся на градиентах хедера вверху экрана, и сделаем анимированную тень между ними, которая будет появляться при свайпе по карточкам. Задайте 0 для бегунка линейки, выделите первый хедер в списке слоев и кликните иконку плюс (+) рядом с названием слоя в панели драйверов, из появившегося меню выберите Opacity. Выберите Opacity из всплывающего меню Drivers Это создаст ключевой кадр с текущим значением слоя Header, в котором указана 100% Opacity (непрозрачность). Настройка первого ключевого кадра Быстрая подсказка: если вы хотите убрать текущий ключевой кадр из анимации, просто выделите его и затем кликните на иконку Remove (X) рядом с названием Property. Потяните бегунок линейки вверх панели драйверов и тяните ее вправо, пока не дойдете до значения 375 (что является шириной нашего экрана, помните?). Конечно, вы будете видеть смену элементов в области канваса, и 2-я карточка появится в поле зрения. Потяните бегунок линейки до 375 Теперь нужно постепенно затенить первый хедер, так что просто уменьшите непрозрачность до 0 в инспекторе. Уменьшите непрозрачность для слоя Header Вы увидите, что автоматически добавился новый ключевой кадр в панели Drivers. К анимации добавился конечный ключевой кадр Потяните бегунок и сдвиньте его назад и вперед, чтобы увидеть анимацию в действии. Давайте повторим те же шаги и для других слоев хедеров. Когда бегунок линейки находится на отметке 375, выберите Header 2 в списке слоев, затем кликните значок плюс (+) рядом с его названием в панели Drivers, выберите Opacity для добавления ключевого кадра. Перетяните бегунок вправо, пока следующая карточка не “сядет” внутрь экрана. Или просто посчитайте в голове; 375*2 = 750. Готово! Опять же, уменьшите непрозрачность до 0, и ваши ключевые кадры будут снова связаны. Связанные ключевые кадры Вперед, настройте последний ключевой кадр сами. Получилось! Ключевые кадры последнего слоя хедеров Ну что ж, анимации хедеров отсортированы. Перейдем к подгонке текстовых слоев, эмблемы, кнопки, для создания нужного положения при слайдинге экранов, а также настройки масштаба, непрозрачности для некоторых элементов. Мы начнем с карточки Джин Эрсо, особенно по части группы Profile Details (детали профиля), где настроим значение непрозрачности по мере изменения положения по оси Х. Выделите группу Profile Details При Scrub Head на 0, группа Profile Details выделена, кликните на иконке плюс (+) рядом с названием группы в панели драйверов, выберите Opacity, и затем уменьшите непрозрачность до 20%. Уменьшите непрозрачность до 20% Затем, как мы делали для градиентов хедера, перетяните Scrub Head на 375, и увеличьте непрозрачность снова до 100%. Увеличьте непрозрачность снова до 100% Теперь для эмблемы повстанцев мы настроим масштаб и значение X. Примечание: не забудьте перетащить бегунок шкалы опять на 0 перед тем, как делать следующие настройки. Итак, с помощью Cmd + Click выделите эмблему повстанцев на канвасе, и добавьте Scale, и X value Keyframe в панели драйверов. Добавьте два ключевых кадра одновременно И затем, из Инспектора, сократите масштаб до 0.5 и измените значение X до 80. Уменьшите масштаб, настройте положение по оси X Как и раньше, перетащите бегунок шкалы на 375, и в инспекторе верните масштаб эмблемы обратно до 1, а значение Х - назад в 0. Верните масштаб и координату Х в исходные значения Протестируйте результат, либо передвинув назад бегунок линейки, либо воспользовавшись окном Preview, чтобы посмотреть эту легкую анимацию в движении. Вернемся к делу, нам еще немало... Настроим координату X текстовых слоев и кнопки, следуя тем же алгоритмам, что и раньше. Убедитесь, что бегунок линейки стоит на 0, затем добавьте ключевой кадр со значением X на каждый из последующих слоев, затем настройте значение параметра X в инспекторе -
1500 SWP 230
Jyn Erso 120
Used to operating… 150
Swap Button 220
В итоге карточный макет на канвасе должен выглядеть так: Добавление X value Keyframeов на каждый слой Подсказка: Вверху вы видели, что я попросил задать конкретные настройки положения по Х для текстовых слоев. И если вы также педантичны в деталях, как и я, то будете чувствовать себя в своей тарелке. Вам не обязательно нужно, чтобы для всех слоев было задано конкретное значение Х, так как если пользователь свайпит конечный прототип/приложение, небольшая разница в координате Х между каждой из карточек не будет заметна для глаза, но я за точность. Перетяните бегунок шкалы на отметку 375, и, выделяя каждый из слоев, по одному за раз, меняйте значение Х, чтобы вернуть их на изначальные позиции…
1500 SWP 164
Jyn Erso 0
Used to operating… 0
Swap Button 102
А теперь протестируйте все в окне превью, и вы увидите, что текстовые слои двигаются в слегка пошатывающейся манере. Идеально! Ну что ж, настал момент самообучения. Следуя тем же шагам, которые я показал для карточки Джин Эрсо, создайте те же анимации и переходы для карточек Кассиана Андора и Берегового штурмовика. Примечание: Не забывайте переводить бегунки в изначальную позицию 375 (Cassian Andor), и 750 (Shoretrooper), и только затем приступайте к настройке слоев. Потом, когда нужно вернуть элементы в их изначальные позиции, переводите бегунок линейки на 750 (Cassian Andor), и 1125 (Shoretrooper) соответственно. Вперед, это несложно! Подсказка: В панели драйверов становится тесно, просто перетяните ее вниз и увеличьте размер окна. Вы вернулись, супер! Надеюсь, у вас получилось нечто такое: Слои, правильно расположенные на канвасе … и что-то такое должно быть в панели драйверов... Ключевые кадры в панели драйверов. Вы справились, отличная работа! Проиграйте все анимации в окне превью. Выглядит красиво? Или вы заметили проблему? Да. Анимация не работает на карточке Орсона Кренника, и не работает, когда карточки появляются слева. Пофиксим это быстрее. Поместите регулятор шкалы на координату 1125, чтобы первые три карточки сидели вне экрана, слева от него. Положение карточек слева Здесь мы сделаем то же, что делали в предыдущей части урока, изменим масштаб, непрозрачность и значение Х разных слоев карточки, и вернем их снова в начальные положения, как только они вернутся в границы экрана. Но на этот раз элементы будут двигаться влево на карточках. Давайте я покажу вам, как настроить карточку с Кассианом Андором, а затем вы снова самостоятельно настроите оставшиеся карточки (можете оставить карточку с Береговым штурмовиком без изменений). Когда бегунок линейки стоит на 1125, выделите группу Profile Details и уменьшите непрозрачность до 20%. Вы увидите новый добавленный ключевой кадр по опции Opacity в панели драйверов. Уменьшение непрозрачности на Profile Details Для эмблемы уменьшите масштаб до 0.5, и задайте значение X, равное -40. Затем, для текстовых слоев и кнопки введите эти значения Х в инспекторе:
890 SWP 110
Cassian Andor -110
An accomplished alliance… -140
Swap Button -100
Получится нечто такое: Карточка Кассиана Андора Проделайте то же самое для карточек Джина Эрсо и Орсона Кренника. Примечание: не забывайте ставить бегунки на начальные положения 750 (Jyn Erso), и 375 (Orson Krennic), и только потом начинайте настраивать слои. Также, на карточке Орсона Кренника, чтобы вернуть элементы на их начальное положение, верните Scrub Head на 0 (так как это первая карточка, которую вы видите, открыв прототип, все должно быть на своих изначальных позициях). Переведите бегунок на 0 Должно получиться примерно так... Корректное положение карточек на канвасе Все на своих местах? Драйверы настроены правильно? Отлично. Проверьте работу анимаций в окне превью. Выглядит лучше, не так ли?
Анимация пагинации
Пагинация все еще выглядит несколько статично. Давайте быстро исправим это и закончим работу над этим уроком. Мы сконцентрируемся на активном слое внутри группы Pagination… Выделите активную точку … и задайте Х, а также масштаб для этого слоя. Выделите слой, кликните на иконке плюс (+) в панели Drivers, выберите опцию X, чтобы создать первый ключевой кадр. Создайте первый ключевой кадр Затем переместите бегунок шкалы на 1125, чтобы карточка Берегового штурмана села внутрь экрана. Удерживайте Shift, чтобы активная точка оставалась выровненной по оси Х, и тяните ее, пока она не встанет поверх последней серой точки. Теперь ключевые фреймы связаны. Удерживайте Shift, чтобы точки оставались выровненными Быстрый свайп в окне превью покажет, что точки корректно позиционированы, пока вы свайпите по карточкам. Выглядит хорошо, но давайте добавим немного искры для этой красной точки. Поместите бегунок на 0, точка Active должна быть выделена, выделите опцию Scale в панели Drivers. Выделите опцию Scale в панели Drivers Далее передвиньте бегунок на 100, измените Scale точки до 0.6. Уменьшите масштаб Active Dot Перетяните бегунок снова на 375, и увеличьте масштаб опять до 1. Проделайте те же шаги для остатка пагинации, всегда возвращая масштаб точки обратно до 1, когда она доходит до каждой карточки (750 и 1125), до тех пор, пока панель драйверов не будет выглядеть так… Ключевые кадры конечной пагинации. Вот и все! Отличная работа! Спасибо, что прочитали этот пост.
Топ коментарі (0)