Редактор Downcodes познакомит вас с новейшей функцией макетов Rive! Он полностью решает проблему экранной адаптации для дизайнеров и разработчиков, упрощая создание динамичной адаптивной анимированной графики. Вместо создания отдельных версий для разных устройств и размеров экрана Layouts может автоматически адаптироваться к различным платформам, чтобы обеспечить согласованные анимационные эффекты. Он также поддерживает несколько языков и автоматически настраивает размер макета для адаптации к длине текста на разных языках. Это, несомненно, огромное благо для разработчиков, которые стремятся обеспечить единообразие визуального восприятия на разных платформах.
Дизайнеры и разработчики могут, наконец, избавиться от страха оказаться во власти «экранной адаптации»! Rive недавно выпустила новую функцию под названием Layouts, которая позволяет пользователям создавать динамичную и отзывчивую анимированную графику, которая может автоматически адаптироваться к различным устройствам и размерам экрана . сохранение характерной для Rive интерактивности и плавной анимации.
Одной из особенностей макетов является совместимость между устройствами. Графика плавно переходит между приборными панелями автомобиля и смартфонами, сохраняя единообразие визуальных эффектов. Дизайнерам нужно создать графику только один раз, и она будет автоматически настраиваться на разных платформах, что устраняет необходимость создавать отдельные версии для каждой платформы.
Макеты также поддерживают несколько языков с возможностью автоматического изменения размера макетов в зависимости от длины языка . Например, если текст длинный, макеты могут изменить расположение или размер текстового поля в соответствии с требованиями отображения на разных языках. Это обеспечивает единообразное отображение на всех языках, и разработчикам не нужно беспокоиться о проблемах с макетом, которые могут возникнуть на разных языках.
Для дизайнеров, которым необходимо создавать сложные макеты, Layouts предлагает варианты глубоко вложенных и гибких макетов. Дизайнеры могут использовать параметры выравнивания, переноса и интервалов для создания сложных макетов пользовательского интерфейса, таких как несколько уровней элементов пользовательского интерфейса или сложные структуры, которые необходимо настраивать на разных экранах.
Макеты также поддерживают точки останова , которые могут активировать конечный автомат Rive для выполнения различных анимаций или изменений макета в зависимости от изменений ширины, высоты или пропорций компонента. Например, макеты могут автоматически переключаться на другой макет или состояние анимации, когда экран переключается с альбомного на портретный.
В отличие от других инструментов дизайна, Rive Layouts позволяет дизайнерам свободно выбирать, будут ли объекты участвовать в механизме компоновки, а также они могут в любой момент нарушать правила компоновки и свободно проектировать. Это означает, что дизайнеры могут встраивать бесплатные элементы, такие как анимированные персонажи, в более структурированные макеты для создания гибких дизайнерских эффектов. Даже если в макет внесены изменения, анимация персонажа остается плавной и не ограничивается механизмом макета.
Кроме того, Layouts также поддерживает интеграцию с системой ограничений (Constraints) Rive, что позволяет вам отойти от традиционных иерархических отношений в дизайне. Даже если макет пользовательского интерфейса изменится, анимация может точно и контролируемо сохранять исходное положение и форму, обеспечивая стабильность визуального эффекта. Например, при изменении макета страницы система ограничений автоматически корректирует связанные элементы, чтобы избежать путаницы в макете.
Компонентами в макетах можно управлять с помощью конечного автомата Rive, вызывая различные изменения состояния в зависимости от ширины, высоты или пропорций компонента. Это позволяет дизайнерам добавлять в свои макеты интерактивную анимацию, например запускать различные последовательности анимации или адаптивные эффекты в зависимости от экрана устройства. Конечный автомат Rive также позволяет вам контролировать каждую деталь анимации при настройке макета, позволяя дизайнерам смешивать несколько адаптивных и интерактивных анимаций в одном дизайне, чтобы предоставить пользователям более богатый визуальный опыт.
Подробности: https://rive.app/blog/introducing-layouts.
В целом, появление Rive Layouts принесло большое удобство дизайнерам и разработчикам, значительно упростило процесс создания кроссплатформенной анимации и сделало более совершенный дизайн анимации доступным. Иди исследуй это сейчас!