AIKraft/AI/Войти
AIKraft/Skills/Анимации в compose

Анимации в compose

Use when writing or reviewing Jetpack Compose motion: visibility enter/exit, animating one property toward a target, color or size transitions, multiple properties from one state, switching composable content, or choosing between AnimatedVisibility, animate*AsState, rememberTransition, AnimatedContent, and Crossfade.

chrisbanes official Дизайн

Что делает навык

Навык помогает выбрать минимальный API для анимации в Jetpack Compose, соответствующий задаче и жизненному циклу. Он охватывает появление/исчезновение, анимацию значений, изменение размеров, переключение контента и императивный контроль.

Когда применять

  • Показать или скрыть поддерево с семантикой входа/выхода
  • Анимировать одно значение, следующее за состоянием
  • Координировать несколько значений из одного состояния (булевого, перечисления или sealed)
  • Изменить размер контента при изменении содержимого
  • Заменить содержимое в одной области с сохранением визуальной идентичности

Как работает

  1. Определите задачу: скрытие/показ, анимация значения, координация значений, изменение размера, замена контента или управление жестами.
  2. Выберите API из таблицы предпочтений, отдавая приоритет API целевого состояния; используйте Animatable только для жестов, прерываний или императивного контроля.
  3. Проверьте жизненный цикл: убедитесь, что анимация альфа-каналом не удаляет контент, если требуется размонтирование (используйте AnimatedVisibility).
  4. Для AnimatedContent рендерите целевое значение из лямбды контента; выбирайте contentKey только при различии визуальной идентичности, а не равенства полезной нагрузки.
  5. Для синхронизированных значений определяйте их в одном переходе через rememberTransition, а не в нескольких независимых вызовах animate*AsState.
  6. Используйте Modifier.animateContentSize() для изменения размера дочернего элемента и drawBehind для анимированных заполнений, обновляющихся каждый кадр.

Примеры запросов агенту

Как анимировать появление и исчезновение видимости поддерева в Compose?
Выбери API для анимации одного свойства к целевому значению с настраиваемой спецификацией.
Как правильно использовать AnimatedContent для переключения различных composable-деревьев с сохранением идентичности?

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «compose-animations» из репозитория: # https://github.com/chrisbanes/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r compose-animations/ ~/.claude/skills/compose-animations/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.