AIKraft/AI/Войти
AIKraft/Skills/flutter-animating-apps

flutter-animating-apps

Реализует анимационные эффекты, переходы и движение в приложениях Flutter. Используйте при добавлении визуальной обратной связи, общих переходов элементов или анимаций на основе физики.

FLFlutter official Разработка ★ 3k

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

Реализует анимационные эффекты, переходы и движение в приложениях Flutter, используя типизированную систему Animation. Позволяет создавать визуальную обратную связь, общие переходы элементов и анимации на основе физики без ручного расчета кадров.

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

  • Добавление визуальной обратной связи при взаимодействии пользователя с интерфейсом
  • Создание общих переходов между элементами или экранами (Hero Transitions)
  • Реализация анимаций, основанных на физике (Physics-Based Animations)
  • Настройка нелинейного времени анимации с помощью кривых (Curves)

Как работает

  1. Использовать AnimationController для управления анимацией, обязательно предоставляя vsync (например, через SingleTickerProviderStateMixin) и вызывая dispose() для предотвращения утечек памяти.
  2. Определить преобразование значений с помощью Tween<T>, сопоставляя входной диапазон (обычно 0.0–1.0) с выходным типом (Color, Offset, double).
  3. Применить нелинейное время анимации, используя Curve через CurvedAnimation или CurveTween.
  4. Реализовать конкретные типы анимаций: неявные (Implicit), явные (Explicit), переходы Hero или анимации на основе физики.
  5. Избегать ручного расчета кадров, полагаясь на тикер и классы интерполяции фреймворка.

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

Создай анимацию плавного появления кнопки с использованием Implicit Animations и кривой Curves.easeIn.
Реализуй переход Hero между двумя экранами с изменением размера и цвета элемента.
Добавь анимацию на основе физики для элемента, который отскакивает при достижении границы экрана.

Что понадобится

  • Среда разработки Flutter с поддержкой системы Animation
  • Использование SingleTickerProviderStateMixin для управления vsync

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

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

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

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