В Интернете полно красивых сайтов, и, просматривая некоторые из них, вы иногда думаете, как было бы здорово, если бы я мог сделать что-то подобное, верно? Я начинаю серию Framer Weekly, в которой я рассказываю о некоторых анимациях и взаимодействиях, которые я вижу в Интернете, и пытаюсь воссоздать их или поделиться некоторыми советами и хитростями создания красивых веб-сайтов с помощью Framer Motion.
Это будет первый пост в серии, в котором мы узнаем об основах анимации и покадрового движения, о том, как их реализовать и как работает анимация.
Я буду использовать следующий стек
- NextJS
- Framer-motion
- TailwindCSS
Если будет использоваться что-то дополнительное, я обязательно добавлю и объясню это.
Давайте начнем с инициализации репозитория и следующего проекта
npx create-next-app framer-weekly with-tailwindcss
Вход в полноэкранный режим Выйти из полноэкранного режима
После этого у нас будет начальный проект nextjs.
Framer — Введение в продукт и рабочая среда / Антон Лапин
Теперь давайте погрузимся в анимацию.
Анимация элемента с помощью framer-motion состоит из трех основных частей
- Начальная
Это начальный этап, на котором мы определяем, как элемент будет располагаться на экране при первоначальной загрузке. - Анимация
Это этап анимации, который изображает этап установки компонента, после установки компонента элемент будет выглядеть следующим образом - Выход
Это похоже на размонтирование компонента, во время размонтирования компонента выполните эти действия.
Это основные три вещи, о которых нужно позаботиться при анимации элемента на экране. Все они передаются компоненту framer-motion в качестве реквизитов.
Вот базовая анимация для справки.
framer motion преобразует каждый HTML-элемент в компонент framer, просто добавив motion. перед элементом, как показано ниже.
Вход в полноэкранный режим Выйти из полноэкранного режима
чтобы использовать вышеуказанный компонент импортируйте motion следующим образом
import motion > from ‘framer-motion’
Войти в полноэкранный режим Выйти из полноэкранного режима
без части motion вы не сможете добавить эти 3 реквизита в компонент.
Вышеуказанные 3 реквизита являются объектами и принимают любое значение CSS, которое вы хотите изменить/анимировать.
intial = opacity: 0, x: 10, >> animate = opacity: 1, x: 100, >>
Вход в полноэкранный режим Выйти из полноэкранного режима
Приведенный выше код при передаче компоненту движения будет анимировать непрозрачность и x-позицию целевого элемента.
Это были основы framer motion, в следующей заметке мы узнаем о вариантах, ступенчатых дочерних элементах и о том, как создать эту красивую текстовую анимацию.
Если вам понравилось и вы хотели бы узнать больше о создании таких анимаций, пожалуйста, следите за мной здесь и в Twitter.
Источник: procodings.ru
Review Framer X | New UX / UI editor
Framer
Инструмент для создания прототипов интерфейса для мобильных и десктопных приложений.
Похожие на Framer
Описание Framer
Framer — онлайн-сервис для создания прототипов дизайна интерфейса под разные форматы устройств. При помощи Framer команды дизайнеров и разработчиков могут оперативно создавать видение интерфейса будущего проекта, что упростит в будущем разработку дизайна будущего продукта.
Дизайн интерфейса пользователь структурирует при помощи страниц и слоёв. Страница — это один элемент меню будущего приложения, на котором можно будет разместить необходимые компоненты: изображения, видео, формы и анимации. Компоненты можно редактировать, изменять их цвет, размер, добавлять фильтры, настраивать их изменения при срабатывании триггеров и другое.
В Framer дизайнеры могут одновременно работать над одним проектом в режиме реального времени и внесённые изменения будут видны всем участникам проектам. Например, один участник проекта может создавать прототип одной страницы будущего приложения, а другой дизайнер будет работать над другой. Для командного общения на сервисе реализованы комментарии. Пользователи могут оставлять комментарий к отдельному компоненты либо к проекту в целом.
Особенности Framer:
- Библиотека готовых шаблонов.
- Совместная работа.
- Интерактивные элементы.
- Настройка под разные форматы: мобильные и веб-приложения, десктопные программы, приложения для телевизора.
- «Умные» компоненты, способные изменять размер и свойства.
Источник: startpack.ru
Framer — бесплатный инструмент для создания интерактивных прототипов
Framer имеем все функции совместной работы, которые вы хотели бы получить от высокоточного инструмента для создания прототипов: многопользовательское редактирование, простой обмен, встроенное комментирование, повторно используемые компоненты, мобильный предварительный просмотр и передача разработчикам.
За интерактивным дизайном будущее. Статические картинки остаются в прошлом. Комаров Егор.
Пока все дизайнеры набросились на Figma и она обрастает всевозможными плагинами и расширениями для всевозможных функций, Framer уже живет в будущем и поставляет весь инновационный функционал по умолчанию. И платформа будет продолжать активно разиваться, ведь она тоже поддерживает сторонние расширения.
Интерактивные компоненты Framer
Framer имеет огромное количество готовых интерактивных компонентов, таких как: поля ввода, кнопки, инпуты и многое другое. Это самая главная и отличительная черта Framer. Весь акцент приложения идет на интерактивные элементы.
Все компоненты кликабельны, интерактивны. И это действительно очень круто.
Вы можете в два клика вставить карту, например.
Кроме встроенных компонентов есть сторонние разработки пользователей. Например можно имитировать интерфейс камеры и подключить реальную камеру телефона для тестирования. И все это делается буквально в пару кликов.
Вы можете добавлять интерактивные элементы Soundcloud, Youtube, слайдеров, Инстаграм, чатов и многое другое. Органичений нет никаких. Библиотека просто огромная. Этот подход выводит прототипирование на совершенно новый уровень.
Анимация Framer
Кроме готовых интерактивных элементов Framer имеет движок крутых анимаций. Благодаря ему, вы можете реализовывать любые UI идеи.
Your browser does not support the video tag
Your browser does not support the video tag
Your browser does not support the video tag
Больше примеров анимации вы можете посмотреть на официальном сайте. Там их тьма.
Интерфейс Framer
Если вы работали в Figma или Sketch, то у вас не должно возникнуть проблем с взаимодейвтвием с интерфейсом Framer. Он сделан привычно как и большинство программ для прототипирования.
Не смотря на то, что эта браузерная версия приложения, работать в ней очень приятно. Интерфейс реализован прекрасно. Видно, что работали настоящие профессионалы своего дела.
В платной версии есть возможно использовать отдельное приложение, но полноценной связи с веб версией там нет.
Благодаря тому, что Интернет предоставляет больше возможностей для совместной работы, веб-версия Framer более функциональная для этих задач. Если для вас важны совместная работа, простой обмен и проекты, размещенные в облаке, разработчики рекомендуют использовать веб-версию.
Если вы сильно предпочитаете работать над автономным приложением macOS и состоите в команде профессионалов, то desktop версия может быть лучшим выбором.
Когда дело доходит до прототипирования и проектирования проектов, для обеих версий доступны практически одни и те же функции, поэтому выбранная вами платформа не имеет значения.
Перенос проектов между ПК и Интернетом
Проекты не синхронизируются между разными платформами. Однако вы можете загрузить проект из Интернета и открыть его desktop приложении или загрузить desktop проект в Интернет.
Превью прототипов
Стоит отметить очень удобный и мгновенный шеринг прототипа. Такой скорости и удобства я еще не встречал нигде. Вам не надо никаких дополнительных программ для того, что отобразить макет в телефоне. Просто открываете ссылку или сканируете QR код и наслаждаетесь результатом. Правки с компьютера отображаются в телефоне практически мгновенно.
Настоящая магия.
Это лиш малая часть того, что умеет платформа. Потенциал Framer огромный. Стоит отметить уже готовые и хорошие туториалы по продукту, которые есть на официальном сайте. Уже сегодня стоит изучать данный подход и развиваться в этом направлении. Рекомендую данный инструмент.
Готовые шаблоны
Framer имеет на сайте огромное количество готовых шаблонов для анимации, чтобы вам было легче разобраться как она работает. Вам достаточно выбрать нужный шаблон и клонировать его в свой проект.
Источник: www.komarov.design