AIKraft/AI/Войти
AIKraft/Skills/Создание анимаций на Reanimated

Создание анимаций на Reanimated

Generate React Native Reanimated animation code for React Native apps. Use when user asks to create, implement, or add animations in React Native — including transitions, gestures, scroll-linked effects, layout animations, layout transitions, entering/exiting animations, CSS animations, CSS transitions, shared element transitions, color animations, parallax, fade, slide, scale, spring, timing, d

estevg official Дизайн

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

Генерирует производительный код анимаций для React Native с использованием библиотеки Reanimated (версии 3 и 4). Позволяет реализовывать переходы, жесты, эффекты привязки к прокрутке, анимации макета и CSS-подобные анимации.

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

  • Создание плавных переходов, эффектов затухания, сдвига или масштабирования элементов интерфейса.
  • Реализация анимаций, связанных с прокруткой (scroll-linked), например, параллакс или изменение прозрачности.
  • Настройка анимаций появления и исчезновения компонентов (mount/unmount) с использованием пресетов или ключевых кадров.
  • Разработка сложных анимаций макета (layout transitions) при изменении размеров или положения элементов.
  • Интеграция анимаций с жестами (drag, pinch, fling) для создания интерактивных интерфейсов.

Как работает

  1. Определить версию Reanimated в проекте (v3 или v4) и выполнить соответствующую установку пакетов и настройку Babel.
  2. Импортировать необходимые хуки (useSharedValue, useAnimatedStyle, withTiming/withSpring) и компоненты (Animated.View и др.).
  3. Создать shared value для хранения анимируемого состояния и связать его с визуальными свойствами через useAnimatedStyle.
  4. Запустить анимацию, изменяя значение shared value с помощью функций анимации (withTiming, withSpring, withSequence и др.).
  5. При необходимости использовать пресеты (FadeIn, SlideInRight) для анимации входа/выхода или CSS-свойства для анимаций в v4.

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

Создай анимацию плавного появления (fade-in) и исчезновения для карточки товара с длительностью 400 мс.
Реализуй анимацию сдвига элемента по горизонтали при нажатии с эффектом пружины (spring).
Напиши код для изменения прозрачности и масштаба заголовка в зависимости от позиции прокрутки ScrollView.

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

  • Установленный пакет react-native-reanimated (версии 3 или 4) и react-native-worklets (для v4).
  • Настроенный Babel плагин 'react-native-reanimated/plugin' или 'react-native-worklets/plugin' (для v3 и v4 соответственно).
  • Библиотека react-native-gesture-handler с оберткой <GestureHandlerRootView> для работы с жестами.

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

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

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

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