Создавайте расширенные анимации с помощью Smart Animate

Перевод статьи Figma “Create advanced animations with Smart Animate”

Кто может использовать эту функцию:

• Пользователи в любой команде или тарифном плане
• Пользователи с правом редактирования файла могут создавать и редактировать прототипы
• Пользователи с правом просмотра доступа к файлу или прототипу могут просматривать прототипы.

Smart Animate ищет совпадающие слои, распознает различия и анимирует слои между фреймами в прототипе.

Вы можете выбрать Smart Animate из списка переходов при создании прототипа. Вы также можете применять Smart Animate с другими переходами для создания бесшовной анимации.

Smart Animate позволяет быстро создавать расширенные анимации. Используйте Smart Animate для повторения:

• Последовательности загрузки
• Прокрутка с параллаксом
• Сенсорные жесты, например перетаскивание, смахивание, длительное нажатие
• Ползунки, тумблеры и переключатели
• Расширение содержимого (Показать больше / Показать меньше)

Figma Tutorial: Smart Animate and Drag Triggers

Узнайте больше о том, как мы создали Smart Animate, в нашей публикации в блоге: Объявление о Smart Animate.

Поддерживаемые свойства

Smart Animate ищет совпадающие слои, существующие в нескольких фреймах. Figma учитывает как имя слоя, так и его место в иерархии.

Для слоев, которые совпадают между фреймами, Figma распознает, что изменилось, и применяет переход для анимации между ними.

Вы можете применить Smart Animate ко всем объектам или компонентам, а также к отдельным слоям внутри компонента или группы.

Вероятно, что более чем одно свойство объекта изменится между фреймами. Мы выделили каждое из поддерживаемых ниже свойств, чтобы вы знали, чего ожидать.

Масштаб

Если размер объекта изменяется между фреймами, Figma будет анимировать его уменьшение или увеличение.

Позиция

Figma распознает, изменилось ли местоположение объекта, координаты x и y. Затем она анимирует объект, перемещающийся из его текущего положения в его положение во фрейме назначения.

Непрозрачность

Smart Animate также может распознавать непрозрачность слоя или объекта. Вы можете настроить непрозрачность, чтобы объект появлялся или исчезал между фреймами.

Установите непрозрачность слоя на 0% вместо переключения видимости слоя. Figma применит переход растворения, чтобы оживить непрозрачность слоя.

Вы можете настроить непрозрачность с помощью свойств слоя «Заливка», а также с помощью свойства «Слой». Smart Animate будет применяться к обоим.

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

Вращение

Smart Animate также учитывает поворот и ориентацию слоя.

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

Поверните один слой сразу или поверните их группу вокруг одной точки привязки.

Заливка

Figma будет использовать Smart Animate при любых изменениях заливки объекта. Это позволяет анимировать изменения между сплошными цветами, градиентами и даже заливками изображения.

На заметку

• Figma не поддерживает Smart Animate для изменения эффектов или перемещения между шейпами. Если свойство не поддерживается, Figma применит переход растворения по умолчанию.
• Figma не поддерживает Smart Animate для действий наложения. Это связано с тем, что Figma рассматривает оверлеи как новые фреймы. Вы можете использовать Smart Animate при переключении между наложениями, если эти наложения имеют совпадающие слои.
• Если вы добавляете новый слой во фрейм назначения, Smart Animate растворяет слой в поле зрения.
• Если свойства слоя остаются неизменными между двумя фреймами, Figma вообще не будет анимировать этот слой. Это отлично подходит для строк состояния и меню, а также для взаимодействия, когда вы не хотите переходить к другому пользовательскому интерфейсу.
• Если вы установите флажок «Фиксированное положение при прокрутке» для любых слоев, Figma добавит их в список фиксированных слоев. Smart Animate по-разному обрабатывает слои, когда вы комбинируете Smart Animate с другими переходами.

Применение Smart Animate

Smart Animate можно использовать в прототипах двумя способами: в качестве отдельного перехода или сочетая Smart Animate с другой анимацией.

Smart Animate

Выберите Smart Animate в поле перехода для анимации между двумя фреймами.

1. Откройте вкладку Prototype на правой боковой панели.
2. Выберите слой, группу или фрейм на холсте. Узел подключения появится на правом краю.
3. Кликните на узел и перетащите его наследующий фрейм, чтобы создать соединение.
4. Определите Interaction (Взаимодействие) на правой боковой панели, выбрав триггер и действие. Figma установит второй фрейм в качестве места назначения.
5. В разделе Animation (Анимация) выберите Smart Animate в поле перехода.
6. Примените Easing (Замедление) к переходу или измените Длительность (необязательно).
7. Повторите эти действия для любых других фреймов, которые вы хотите использовать в Smart Animate.
8. Кликните значок Present (Представить) на панели инструментов, чтобы открыть прототип в режиме «Презентация».

В нашем примере ниже у нас есть три фрейма с некоторыми совпадающими слоями. Мы хотим, чтобы Smart Animate анимировала удаление трека Abel Tasman Coast Track из нашего списка избранного.

Smart Animate теперь плавно перемещает нас между кадрами в нашем прототипе!

Совпадающие слои Smart Animate

Если вы хотите использовать Smart Animate для некоторых слоев в своем прототипе при использовании другого основного перехода, вы можете установить флажок Smart Animate для совпадающих слоев.

Figma по-разному обрабатывает фиксированные слои при использовании Smart Animate с другими переходами.

• Слои, которые не совпадают: Figma будет использовать основной выбранный вами переход.
• Слои, которые действительно совпадают: Figma будет использовать Smart Animate при любых различиях в поддерживаемых свойствах.
• Фиксированные слои, которые совпадают: Figma не применяет никаких переходов.
• Фиксированные слои, которые не совпадают: Figma применит переход растворения вместо выбранного вами перехода.

Чтобы использовать совпадающие слои Smart Animate, установите флажок на правой боковой панели при настройке анимации:

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

Мы выбрали Push-переход для перемещения между фреймами. Мы решили не устанавливать флажок рядом с соответствующими слоями Smart Animate.

Когда мы просматриваем наш прототип, мы видим, что все в нашем фрейме назначения использует переход Push. Это делает довольно очевидным, что мы перемещаемся между отдельными экранами в прототипе.

Если мы установим флажок рядом с совпадающими слоями Smart Animate, наша строка состояния и навигация останутся на своих местах, в то время как остальное содержимое использует Push.

Советы по умной анимации

До Smart Animate Figma не придавала большого значения именам слоев. Поскольку Smart Animate зависит от имени слоя и иерархии, может потребоваться другой подход.

Ниже мы описали несколько способов устранения непредвиденных результатов Smart Animate.

Подсказка! Мы рекомендуем увеличивать длительность при создании вашего прототипа. Это позволяет вам видеть, что происходит, и вносить изменения.

Имена слоев

Один из быстрых способов создания фреймов для Smart Animate — их дублирование. Это сохраняет единообразие наименования между каждым фреймом. Затем при необходимости вы можете добавлять и удалять слои в каждый фрейме.

Figma называет фреймы и слои в зависимости от того, как вы их дублируете или копируете и вставляете.

• Внутри фрейма: Figma пронумеровывает их слои последовательно. Например: фрейм 1, фрейм 2 и т. д.
• Между фреймами: Figma использует одно и то же имя. Например: если вы скопируете прямоугольник 1 из одного кадра, Figma вставит его как прямоугольник 1 в следующий кадр.

У вас могут быть объекты или слои, которые существуют во фреймах, но имеют разные имена в каждом. Или у вас может быть противоположная проблема — слои с одинаковыми именами, которым вы не хотите сопоставлять.

Вы можете просматривать и обновлять имена слоев с помощью панели Layers (Слои) на левой боковой панели. Узнайте, как массово переименовывать слои.

Просмотр совпадающих слоев

Figma также упростила идентификацию слоев или объектов, которые существуют — или совпадают — между фреймами. Это применимо ко всем слоям, группам, фреймам и компонентам.

1. Откройте вкладку Prototype (Прототип) на правой боковой панели.
2. Наведите указатель мыши на объект или слой на холсте.
3. Figma выделит этот слой в любых других фреймах, в которых он существует.

Порядок и иерархия слоев

Smart Animate и совпадающие слои Smart Animate учитывают порядок слоев или иерархию ваших слоев.

Обычно при перемещении внутрь или скольжения весь фрейм назначения перемещается над исходным фреймом. С совпадающими слоями Smart Animate Figma будет перемещать или сдвигать слои в зависимости от их иерархии, что может вызвать некоторые запутанные или неожиданные результаты.

На нашем скриншоте ниже у нас есть два совпадающих объекта между нашими фреймами (Explorer 1 и Explorer 2). Это строка состояния и навигация.

Если у нас есть слои над любыми совпадающими слоями, Figma анимирует их над фреймом назначения. На нашем скриншоте ниже мы видим, что слои из Explorer 1 появляются во фрейме назначения.

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

Группировка слоев

Чтобы быть более точным при выборе Smart Animate, Figma сопоставляет слои на основе их имени и иерархии. Это также позволяет быстро не совмещать слои между фреймами.

Допустим, у нас есть пять прямоугольников в каждом из наших фреймов. Эти прямоугольники содержат различное содержимое для каждого фрейма. Мы обозначили их как Поездка 1 — Поездка 5 во всех трех фреймах.

Когда мы пытаемся применить переход Push, Smart Animate распознает их как совпадающие слои. Вместо того, чтобы рассматривать эти прямоугольники как новый контент, Figma Smart Animates изменяет их положение.

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

При предварительном просмотре нашего перехода Smart Animate больше не распознает их как совпадающие слои. Наш контент будет объединяться, делая наш прототип более реалистичным.

Умная анимация Slide In (Скольжение) и Move In (Движение)

При использовании совпадающих слоев Smart Animate с переходами Slide или Move необходимо учитывать несколько моментов.

Если этот параметр выбран, Figma будет анимировать любые совпадающие слои между фреймами. Это означает, что Figma не может анимировать весь конечный фрейм (B) поверх исходного фрейма (A), как обычно.

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

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