SuperAPI AI 工具集

animations-native

设计与创作

查看项目

更新于 10-16 01:29

技能介绍

用途:为 React Native / Expo 编写或审查动画,让动效在 UI 线程运行以保持 60/120 fps,并尊重系统 Reduce Motion 设置。它是 animations 技能的原生版本,后者负责 Web(CSS、Motion、View Transitions),本技能负责 React Native / Expo。

主要能力:核心主张是只动画 transform 与 opacity,并用 Reanimated shared value 从 UI 线程驱动数值,避免每帧重算 Yoga 布局;手势由 react-native-gesture-handler 处理。技能提供决策流程:状态驱动的自包含动画用 Reanimated CSS API;组件或列表项的进入/退出/重排用布局动画;手势、滚动或可中断动画用 worklet/hooks API 加 gesture-handler;简单淡入淡出可用 RN 核心 Animated 加 useNativeDriver: true;声明式 props 可用 Moti(需检查 Reanimated 4 兼容性);设计师产出的固定时间线资产用 Lottie,交互式资产用 Rive。

使用方式:按阶段执行——先做交互反馈头脑风暴(若用户描述的是交互动词),再选择属性与线程、挑选 API、接入手势、设定时长(100–500 ms,进入 ease-out、退出 ease-in,手势驱动用弹簧)、处理 Reduce Motion、必要时加触觉反馈、最后用 Perf Monitor 测量 UI 线程与 JS 线程帧率。规则文件按需加载,不预加载。

限制与反模式:不要动画 width/height/flex/top/left 等布局属性;不要把逐帧动画值放在 React useState;不要在渲染时读取 sharedValue.value;手势/worklet 中更新状态须经 scheduleOnRN(v3 为 runOnJS);使用手势需包裹 GestureHandlerRootView;新代码避免旧版 PanGestureHandler / useAnimatedGestureHandler;Reduce Motion 下应替换为淡入淡出而非直接删除动效;触觉反馈须配合视觉提示,不可仅用触觉;不要在调试构建下判断流畅度。具体规则细节见 rules/*.md。