Nelle parole della skill
Una skill di costruzione per il motion in React Native ed Expo. Trasforma una richiesta di animazione in un'implementazione che supera la revisione su un dispositivo reale, prendendo le decisioni nell'ordine che determina se risultano corrette: se animare affatto, su quale thread viene eseguita, quali proprietà, spring o timing, come avviene il passaggio del gesto, come degrada.
Tutto discende da tre fatti mobile: non esiste il passaggio del mouse, esistono due runtime e il dito dell'utente è sull'elemento. È pensata per chi anima un'app Expo, aggiunge gesture, sheet, transizioni tra schermate, feedback alla pressione o feedback haptic, oppure corregge animazioni che scattano sul dispositivo. Il codice è scritto con Reanimated, Gesture Handler, Expo Router e expo-haptics.
Che cosa produce
- Il codice di implementazione stesso, scritto direttamente piuttosto che proposto come opzioni.
- Un breve risultato del gate che indica il livello di frequenza e lo scopo dichiarato, incluso ciò che è stato respinto e perché.
- La riga degli ingredienti: tool, proprietà, spring o curva più durata, e su quale runtime avviene il lavoro.
- Un elenco di ciò che va verificato "a sensazione" su un dispositivo, poiché il passaggio dei gesti e il timing dell'haptic non si possono leggere dal codice.
Come funziona
- 01Sottoponga l'Animazione al Gate Prima di Ogni Altra Cosa
Una tabella di frequenza decide se il movimento debba avvenire o meno; il livello più alto blocca il processo e non scrive alcun codice. I cambi di tab non scorrono mai perché le tab sono elementi paritari, non una gerarchia.
- 02Definisci lo Scopo in una Parola
Lo skill impone di indicare un'unica intenzione in una parola prima di procedere — feedback, coerenza spaziale, indicazione di stato, prevenzione di un cambiamento brusco, spiegazione o delight, quest'ultimo riservato ai rari momenti di primo utilizzo.
- 03Scelga lo Strumento Più Economico che Funziona
Scorra una tabella e si fermi alla prima riga adatta: CSS transition, CSS keyframes, layout animation, shared value più Gesture, poi native stack, formSheet, NativeTabs, Link.Menu, RefreshControl, Lottie o Skia.
- 04Limiti le Proprietà Animate
Transform e opacity non costano nulla; tutto il resto forza un passaggio di layout che riesegue Yoga sul nodo e sui suoi fratelli a ogni frame.
- 05Scelga Spring o Timing in Base al Dito
Qualsiasi interazione guidata da un dito riceve una spring, così la velocità si trasmette attraverso un'interruzione; tutto il resto usa una curva timing, mai ease-in.
- 06Tenga il Frame Fuori dal Thread JS
I shared value alimentano useAnimatedStyle invece dello state React, e le chiamate al runtime RN vengono spostate su onEnd o su una reazione a soglia invece di essere lanciate dentro un aggiornamento del gesto.