Словами самого skill
Скилл для создания движения в React Native и Expo. Он превращает запрос на анимацию в реализацию, которая проходит проверку на реальном устройстве, принимая решения в том порядке, который определяет, будут ли они ощущаться правильно: стоит ли анимировать вообще, на каком потоке это выполняется, какие свойства, spring или timing, как передаётся жест, как деградирует поведение.
Всё следует из трёх фактов о мобильных устройствах: hover не существует, есть два runtime, и палец пользователя находится на элементе. Скилл предназначен для всех, кто анимирует приложение на Expo, добавляет жесты, шторки, переходы между экранами, отклик на нажатие или haptics, либо исправляет анимацию, которая заикается на устройстве. Код написан с использованием Reanimated, Gesture Handler, Expo Router и expo-haptics.
Что он выдаёт
- Сам код реализации, написанный напрямую, а не предложенный в виде вариантов.
- Короткий результат проверки, указывающий частотный уровень и названное назначение, включая то, что было отклонено и почему.
- Строка с ингредиентами: инструмент, свойства, spring или curve плюс duration, а также на каком runtime выполняется работа.
- Список того, что нужно проверить «на ощупь» на устройстве, поскольку передачу жеста и таймингхаптики нельзя оценить по коду.
Как это работает
- 01Проверьте анимацию прежде всего остального
Таблица частоты решает, происходит ли движение вообще; верхний уровень останавливает процесс и не пишет код. Переключение вкладок никогда не сопровождается сдвигом, потому что вкладки — это равноправные элементы, а не иерархия.
- 02Назовите цель одним словом
Skill требует назвать одним словом намерение перед тем, как продолжить — feedback, spatial consistency, state indication, предотвращение резкого изменения, explanation или delight, причём последнее только для редких моментов первого знакомства.
- 03Выберите самый дешёвый инструмент, который работает
Пройдите по таблице сверху вниз и остановитесь на первой подходящей строке: CSS transition, CSS keyframes, layout animation, shared value плюс Gesture, затем native stack, formSheet, NativeTabs, Link.Menu, RefreshControl, Lottie или Skia.
- 04Ограничьте анимируемые свойства
Transform и opacity ничего не стоят; всё остальное запускает layout pass, который каждый кадр заново прогоняет Yoga для узла и его соседей.
- 05Выбирайте spring или timing в зависимости от пальца
Любое взаимодействие, инициированное пальцем, получает spring, чтобы скорость сохранялась при прерывании; всё остальное использует timing-кривую, никогда ease-in.
- 06Не выносите кадр на JS thread
Shared values передаются в useAnimatedStyle вместо React state, а вызовы RN-runtime переносятся в onEnd или в реакцию на порог, а не выполняются внутри обновления жеста.