En los propios términos del Skill
Un skill de construcción para el movimiento en React Native y Expo. Convierte una petición de animación en una implementación que supera la revisión en un dispositivo real, tomando las decisiones en el orden que determina si se sienten bien: si debe animarse, en qué hilo se ejecuta, qué propiedades, resorte o timing, cómo se transfiere el gesto, cómo degrada.
Todo se deriva de tres hechos del móvil: no hay hover, hay dos runtimes y el dedo del usuario está sobre el elemento. Sirve para quien anime una app de Expo, añada gestos, hojas, transiciones de pantalla, respuesta al pulsar o háptica, o arregle movimiento que se entrecorta en el dispositivo. El código está escrito con Reanimated, Gesture Handler, Expo Router y expo-haptics.
Qué produce
- El propio código de implementación, escrito directamente en lugar de ofrecerse como opciones.
- Un resultado breve de la evaluación que indica el nivel de frecuencia y el propósito nombrado, incluyendo qué se rechazó y por qué.
- La línea de ingredientes: herramienta, propiedades, spring o curve más duration, y en qué runtime ocurre el trabajo.
- Una lista de qué comprobar «al tacto» en un dispositivo, ya que el traspaso de gestos y el timing háptico no se pueden leer en el código.
Cómo funciona
- 01Evalúe la Animación Antes de Cualquier Otra Cosa
Una tabla de frecuencia decide si la animación ocurre o no; el nivel superior detiene el proceso y no escribe código. Los cambios de pestaña nunca se deslizan porque las pestañas son pares, no una jerarquía.
- 02Nombre el propósito en una palabra
El skill exige una intención de una sola palabra antes de continuar: feedback, consistencia espacial, indicación de estado, prevenir un cambio brusco, explicación o deleite, este último solo para momentos raros de primera vez.
- 03Elija la Herramienta Más Económica que Funcione
Recorra una tabla y deténgase en la primera fila que encaje: CSS transition, CSS keyframes, layout animation, shared value más Gesture, luego native stack, formSheet, NativeTabs, Link.Menu, RefreshControl, Lottie o Skia.
- 04Restrinja las Propiedades Animadas
Transform y opacity no cuestan nada; todo lo demás fuerza un pase de layout que vuelve a ejecutar Yoga en el nodo y sus hermanos en cada frame.
- 05Elija Spring o Timing según el Dedo
Cualquier interacción impulsada por un dedo recibe un spring para que la velocidad se mantenga a través de una interrupción; todo lo demás usa una curva de timing, nunca ease-in.
- 06Mantenga el Frame Fuera del Hilo de JS
Los shared values alimentan useAnimatedStyle en lugar del estado de React, y las llamadas al runtime de RN se posponen a onEnd o a una reacción por umbral en lugar de disparase dentro de una actualización de gesto.