Состояния объекта

Object states хранит несколько вариантов внешнего вида одного виджета. Секция появляется в правой панели, когда выбран один поддерживаемый виджет. Для групп, Canvas, Frame, нескольких выбранных объектов и режима Animation mode она недоступна.

Создать состояние

1. Выберите виджет.
2. Нажмите + в секции Object states.
3. Выберите Hover, Pressed, Click или Add custom state.

Hover, Pressed и Click создают состояние и сразу связывают его с одноимённым событием в Preview и опубликованной статье. Если состояние с таким точным названием уже существует, выбор preset свяжет его с событием без создания дубликата. Связь хранится отдельно от названия: состояние можно переименовать, а его поведение не изменится.

Пользовательские состояния из Add custom state не включаются автоматически. У связанного состояния показывается badge события. Команда Disable automatic state в меню строки отключает автоматическое поведение, но сохраняет само состояние и его настройки.

Строка Default показывает обычный внешний вид объекта. Это базовое состояние: его нельзя переименовать или удалить.

Настроить внешний вид

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

• координаты X и Y на холсте;
• масштаб по осям;
• дополнительный поворот;
• сплошная заливка и прозрачность;
• скругление углов;
• обводка;
• эффекты.

Положение, масштаб и поворот собраны в секции Layout, а заливка, прозрачность и скругление — в секции Style. Эти названия совпадают с секциями в Animation mode.

Размер объекта, содержимое, ссылки, интерактивные связи и анимации в состояние не входят. Изменения состояния не меняют Default: выберите его в списке, чтобы вернуться к обычному виду.

Если снять выделение с виджета, ручной предпросмотр состояния завершится и объект вернётся в Default. Созданное состояние и его настройки при этом сохраняются.

Position показывает целые координаты состояния на холсте, как в Animation mode. При изменении Scale редактор автоматически пересчитывает координаты с учетом масштаба.

Настроить переход

При выбранном пользовательском состоянии секция Transition находится между Object states и Layout. Она доступна сразу и сворачивается по нажатию на заголовок.

Для нового состояния используются настройки по умолчанию:

• Duration — длительность, по умолчанию 300 ms;
• Delay — задержка перед началом, по умолчанию 0 ms;
• Easing — характер изменения скорости, по умолчанию Ease in out.

Настройки перехода копируются и дублируются вместе с состоянием. Они применяются при автоматическом переключении в Preview и опубликованной статье. При возвращении в Default используется переход покидаемого состояния; снятие Hover или Pressed начинается без дополнительной задержки.

Обычная видимая анимация и автоматическое состояние не могут одновременно управлять одним виджетом. Редактор не даст включить такую комбинацию. Если она уже попала в данные, проигрывается обычная анимация, а автоматические состояния этого виджета остаются выключенными.

Переименовать, очистить или удалить

Дважды нажмите на название состояния, чтобы переименовать его. Названия внутри одного объекта должны различаться без учёта регистра; имя Default зарезервировано.

В меню состояния доступны две команды:

• Reset state удаляет все отличия и снова показывает внешний вид Default, но оставляет состояние в списке;
• Delete state удаляет состояние целиком.

Копировать состояние на холсте

Когда выбрано пользовательское состояние, обычные команды холста применяются к нему, а не к исходному виджету:

• Delete удаляет состояние и возвращает виджет в Default;
• Cmd/Ctrl+D создаёт независимую копию состояния и сразу выбирает её;
• Cmd/Ctrl+C и Cmd/Ctrl+V копируют состояние в тот же или другой выбранный поддерживаемый виджет;
• Cmd/Ctrl+X копирует состояние и удаляет его только после успешной записи в буфер обмена.

Копия получает новый ID и уникальное имя: например, Hover copy, затем Hover copy 2. При вставке в другой виджет переносятся только заданные отличия. Остальные свойства наследуются из Default целевого виджета.

Если выбран Default, копирование и дублирование работают с самим виджетом вместе со всеми его состояниями.

Что увидит читатель

В Preview и опубликованной статье явно связанные состояния работают так:

• Hover активно, пока указатель находится над виджетом;
• Pressed активно, пока удерживается основная кнопка мыши, перо, касание или клавиша Enter/Space на доступном с клавиатуры элементе;
• Click переключается завершённым нажатием: первый click включает состояние, следующий выключает.

Если одновременно подходят несколько состояний, используется приоритет Pressed → Click → Hover → Default. Поэтому Pressed временно перекрывает остальные состояния, а включённый Click сохраняется после ухода указателя.

Состояния без явной связи, старые статьи и страница без JavaScript продолжают показывать Default. Автоматические состояния не отменяют обычное поведение ссылок и элементов виджета.