React Native动画与手势终极指南Expo Skills的expo-animation配方与触觉反馈【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/gh_mirrors/skills9/skills在 React Native 应用开发中动画、手势与触觉反馈是决定 App 手感的三大核心。开源项目Expo Skills中的expo-animation技能正是为此而生它把移动端动画的决策顺序该不该动画、跑在哪个线程、用弹簧还是时间曲线、手势如何交接、如何降级沉淀成一套完整方法论并附带8 个可直接套用的动画配方和触觉反馈Haptics最佳实践帮助新手快速做出丝滑不卡顿的移动端动效。expo-animation 是什么Expo 官方动画技能一览expo-animation是 Expo 团队官方出品的开源 AI Agent 技能与知名动画工程师 Emil Kowalski 合作打造安装后可直接被 Claude Code 等 AI 编程助手调用。它的定位很明确把做一个动画的需求变成一段在真实设备上严格检验过的实现——而不是只在模拟器里看着顺滑。核心内容都在两个文件里决策方法论plugins/expo/skills/expo-animation/SKILL.md现成代码配方plugins/expo/skills/expo-animation/RECIPES.md移动端和 Web 动画有本质区别技能开篇就点出三点 ⚡没有 hover——Web 上悬停展示的信息移动端必须放在按压态或布局里有两个运行时——动画必须留在 UI 线程worklet上否则 JS 一忙动画就掉帧用户的手指就在元素上——手势可打断、速度交接是基线要求不是锦上添花。第一步先问这个 UI 该不该动画技能给出的第一道关卡是频率门槛——不是所有东西都值得动画化使用频率决策每天 100 次Tab 切换、键盘开合、滚动不做动画保持平台默认每天几十次按下反馈、列表跳转只能几乎无感150ms 以内偶尔弹层、模态框、Toast标准动画极少 / 首次成功态、庆祝动效愉悦预算只花在这里一个反直觉但重要的结论Tab 切换永远不要做滑动动画。Tab 是平级关系滑动暗示了不存在的层级深度而用户每次会话要为此付费几十次。9 步构建顺序从线程选择到触觉反馈SKILL.md把动画实现拆成 9 个按序执行的步骤这也是排查动画问题的排查顺序选工具用最便宜的可行方案无手势的状态切换 → Reanimated 的 CSS transition循环 / 入场动画 → CSS animation 关键帧元素挂载/卸载 → 布局动画entering / exiting手指碰到的、或跟随滚动的 → 共享值 Gesture useAnimatedStyle页面跳转 → Expo Router 原生 Stack绝不用 JS 手搓底部弹层 →presentation: formSheet白嫖平台原生 Sheet详见 form-sheet.md选属性transform 和 opacity 是免费的动画width、height、margin会触发每一帧的布局计算这是掉帧的头号元凶而transform和opacity跑在合成器上几乎零成本。唯一的例外是无子元素的绝对定位小部件如 Tab 指示条动画化width反而能保住圆角。弹簧还是时间曲线看有没有手指手指参与了就用弹簧——弹簧能携带速度穿过中断点其他场景用时间曲线且永远别在 UI 上用 ease-in起步太慢恰好在用户盯着的那一刻拖了后腿移动端 UI 动画总时长压在300ms 以内。保持动画远离 JS 线程这是移动端动画最致命也最值钱的一课手势和滚动回调里绝不setState——每帧一次 React 渲染是 RN 卡顿的最大来源用共享值 useAnimatedStyleReact 完全不重渲染从 worklet 回调 JS 线程用scheduleOnRN且只放在onEnd或阈值触发处。8 个现成动画配方按下反馈、底部弹层与滑动删除RECIPES.md 收录了 8 个高频场景的完整实现建议从配方出发再按需改造配方解决的痛点按下反馈按钮按下时 120ms 缩小 3%一行 CSS transition 搞定可拖拽关闭的底部弹层速度判定而非距离判定——快速一甩就能关闭滑动删除列表行动量投影判断去留itemLayoutAnimation让列表自动合拢滚动折叠标题固定高度容器内移动内容绝不动画化 header 高度列表入场每行 30–80ms 交错入场虚拟化列表行禁用 entering键盘同步 UIUI 跟随键盘真实位置逐帧移动不靠事件时长猜测Tab/分段指示条官方认可的一处width动画配ease-in-out屏幕过渡Expo Router 原生选项保留交互式返回手势其中底部弹层配方的四个细节最值得新手记牢手势开始时从当前位置捕获避免中途抓弹层瞬移、速度决定去留、把速度交给弹簧手指松开和动画接管之间没有接缝、关闭时加overshootClamping防止弹层冲出屏幕底部闪烁。触觉反馈三大铁律让 App 用起来更高级移动端拥有 Web 没有的触觉expo-haptics让它可以被精准调用。技能给了一张场景对照表 时刻调用数值跨过档位Picker、滑块吸附Haptics.selectionAsync()弹层吸附、拖拽归位impactAsync(Light)重物落地、破坏性操作impactAsync(Medium)操作成功 / 失败notificationAsync(Success / Error)三条铁律是绝对的见 SKILL.md#L184-L190和视觉发生在同一帧——滞后的触觉听起来像 Bug像 Bug 就不像反馈了每个用户动作最多一次——绝不在滚动、逐帧、非用户触发的入场动画上振动触觉绝不能是唯一反馈——很多用户系统级关闭了振动多数 Android 硬件也静默视觉必须能独立成立。避坑清单Never Ship 高频错误速查技能末尾的绝不上线清单是绝佳的新手自检表节选最致命的几条❌ 用PanResponder→ ✅ 用 gesture-handler 的Gesture.Pan()❌ 在onUpdate里每帧回调 JS 线程 → ✅ 放到onEnd或阈值useAnimatedReaction❌ 只按距离判断关闭 → ✅速度或距离——一记快速轻扫就该生效❌ 边界处硬停 → ✅ 橡皮筋阻尼阻力❌ 用scale(0)入场 → ✅scale(0.95) opacity: 0现实中没有东西从无出现❌ 在 Expo Go / 模拟器里判断手感 → ✅ 真机 release build真机验证清单如何判断动画手感对不对技能的硬性标准只有一条手感必须在你支持的最慢设备的 release build 上判断其他环境的结果都不算数——Expo Go 和开发构建的 JS 线程太慢恰好掩盖了你要找的问题。真机上重点试四个动作甩它——速度交接是否流畅中途打断它——从动画中途抓住弹层应从眼睛最后看到的位置继续反向操作——推出去又拉回来最慢的 Android 上再跑一遍——iOS 上 60fps 不代表 Android 不掉帧。另外别忘了两点细节ProMotion 机型上 120fps 需要在app.json中确认CADisableMinimumFrameDurationOnPhone已开启useReducedMotion降级方案要随动画一起交付——减少动效是更少更温和保留说明状态的颜色/透明度变化去掉位移、缩放和过冲即可。上手方式用 AI Agent 调用 expo-animation这套技能不是读完就懂的资料而是可直接执行的 Agent 技能整个 Expo 插件的说明见 plugins/expo/README.md。装好 Expo 插件后当你对 AI 助手说给底部弹层加一个可拖拽关闭的手势配上触觉反馈Agent 会自动加载expo-animation按上面的 9 步顺序做出决策、引用对应配方、直接写出实现并附上门禁结论频率档位 命名目的和真机手感检查清单——这正是该技能设计的目标代码才是交付物而不是长篇报告。对于刚接触 React Native 动画和手势的开发者建议的阅读路径是先读 SKILL.md 建立决策框架再带着具体需求翻 RECIPES.md 找配方最后对照Never Ship清单做一遍自检。动画的感觉无法从代码中评判——记住技能最后的忠告需要真机的时候就去真机上看。【免费下载链接】skillsA collection of AI agent skills for working with Expo projects and Expo Application Services项目地址: https://gitcode.com/gh_mirrors/skills9/skills创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考