In den eigenen Worten des Skills
Ein Konstruktions-Skill für Bewegung in React Native und Expo. Er verwandelt eine Animationsanfrage in eine Implementierung, die eine Review auf einem echten Gerät überlebt, und trifft die Entscheidungen in der Reihenfolge, die darüber bestimmt, ob sie sich richtig anfühlen: Sollte es überhaupt animieren, auf welchem Thread läuft es, welche Eigenschaften, Spring oder Timing, wie übergibt sich die Geste, wie degradiert es.
Alles folgt aus drei mobilen Tatsachen: Es gibt kein Hover, es gibt zwei Runtimes, und der Finger des Nutzers liegt auf dem Element. Es ist für alle gedacht, die eine Expo-App animieren, Gesten, Sheets, Bildschirmübergänge, Press-Feedback oder Haptik hinzufügen oder Bewegung reparieren, die auf dem Gerät stockt. Der Code ist mit Reanimated, Gesture Handler, Expo Router und expo-haptics geschrieben.
Was er erzeugt
- Der Implementierungscode selbst, direkt geschrieben statt als Optionen angeboten.
- Ein kurzes Gate-Ergebnis, das die Frequenzstufe und den benannten Zweck angibt, einschließlich dessen, was abgelehnt wurde und warum.
- Die Zutatenliste: Tool, Eigenschaften, Spring oder Curve plus Dauer, und auf welcher Runtime die Arbeit stattfindet.
- Eine Liste dessen, was auf einem Gerät gefühlt geprüft werden sollte, da Gesture-Handoff und Haptik-Timing sich nicht aus dem Code ablesen lassen.
So funktioniert es
- 01Die Animation vor allem anderen gaten
Eine Frequenztabelle entscheidet, ob überhaupt Bewegung stattfindet; die oberste Stufe stoppt und schreibt keinen Code. Tab-Wechsel gleiten niemals, da Tabs gleichrangig sind und keine Hierarchie bilden.
- 02Den Zweck in einem Wort benennen
Der Skill erzwingt eine einwortige Absicht, bevor fortgefahren wird — Feedback, räumliche Konsistenz, Zustandsanzeige, Vermeidung eines abrupten Wechsels, Erklärung oder Delight, letzteres nur für seltene erste Momente.
- 03Das günstigste funktionierende Tool wählen
Eine Tabelle durchgehen und bei der ersten passenden Zeile stoppen: CSS-Transition, CSS-Keyframes, Layout-Animation, Shared Value plus Gesture, dann native Stack, formSheet, NativeTabs, Link.Menu, RefreshControl, Lottie oder Skia.
- 04Die animierten Eigenschaften einschränken
Transform und Opacity kosten nichts; alles andere erzwingt einen Layout-Pass, der Yoga bei jedem Frame für den Knoten und seine Geschwister neu ausführt.
- 05Spring oder Timing anhand des Fingers wählen
Jede vom Finger ausgelöste Interaktion bekommt einen Spring, damit die Geschwindigkeit bei einer Unterbrechung erhalten bleibt; alles andere nutzt eine Timing-Curve, niemals ease-in.
- 06Den Frame vom JS-Thread fernhalten
Shared Values versorgen useAnimatedStyle statt React State, und RN-Runtime-Aufrufe werden auf onEnd oder eine Schwellenreaktion verschoben, statt innerhalb eines Gesture-Updates ausgelöst zu werden.