SuperAPI AI 工具集

react-native-ease-refactor

编程与开发

查看项目

更新于 10-14 08:58

技能介绍

react-native-ease-refactor 是一个面向 React Native 项目的动画代码迁移辅助工具,目标是把 react-native-reanimated 和 React Native 内置 Animated API 的动画代码转换为 react-native-ease 的 EaseView 组件实现。它按照发现、分类、试运行报告、用户确认、执行迁移、最终报告六个阶段依次进行,官方说明要求不得跳过或调换阶段顺序。

用途与工作流程 该技能用于在已有 React Native 代码库中排查动画代码并做批量改写。第一阶段做发现:检测项目是否使用 NativeWind,读取 package.json 判断 react-native-reanimated 版本(v4 与 v2/v3 的默认参数不同),查找所有从 react-native-reanimated 或 react-native 的 Animated 导入动画相关 API 的文件,并排除 node_modules、测试文件和构建输出目录。

分类与迁移判断 第二阶段按决策树将每个组件判定为可迁移或不可迁移。使用手势 API(如 Gesture.Pan、useAnimatedGestureHandler)、滚动处理器、sharedTransitionTag、runOnUI/worklet、withSequence、复杂 interpolate、layout 属性,或动画属性不在支持列表内时,会被判定为不可迁移。支持动画的属性包括 opacity、translateX/Y、scale、scaleX/Y、rotate、rotateX/Y、borderRadius、backgroundColor、borderWidth、borderColor、shadowOpacity、shadowRadius、shadowColor、shadowOffset、elevation。不同属性使用不同过渡配置、由状态驱动的动画则属于可迁移范围,可映射为按类别键(transform、opacity、borderRadius、backgroundColor、border、shadow、default)组织的 TransitionMap。

默认值与单位映射 文档特别强调 Reanimated 与 EaseView 的默认值不同,必须显式写出原值以保持动画行为。例如 withSpring:Reanimated v2/v3 默认 damping 10、stiffness 100,EaseView 默认 damping 15、stiffness 120,需要显式设置;Reanimated v4 默认 damping 120、stiffness 900、mass 4。withTiming 方面,Reanimated 默认缓动是二次 ease-in-out,EaseView 默认是三次,需要显式设置 easing: [0.455, 0.03, 0.515, 0.955]。旧版 Animated.timing 默认 duration 500,Animated.spring 使用 friction 7、tension 40,分别映射为 damping 和 stiffness。旋转角度需把 '45deg' 字符串转换为数字 45。

使用方式 技能要求先输出试运行报告,逐条列出可迁移组件的当前动画、拟改用 EaseView 的写法(含映射后的过渡参数)以及将要增删改的内容,同时列出不可迁移组件及原因。报告必须以文本形式直接显示,不能放进计划或折叠。随后必须通过 AskUserQuestion 工具让用户多选确认要迁移的组件,用户未选择则中止且不做任何修改。确认后逐个组件执行迁移:添加 EaseView 导入、替换 Animated.View、把动画 hook 转为 animate/initialAnimate/transition 属性、处理 entering/exiting、清理不再使用的导入,并输出进度;最后输出已完成与未变更清单,并建议运行应用目视验证动画、运行测试检查回归、若不再有 Reanimated 代码可考虑移除依赖。

限制与安全规则 安全规则要求存疑即跳过、不得删除仍被使用的导入、保留所有非动画逻辑、保持组件结构与公开 API 不变、正确处理混合文件、避免引入 TypeScript 错误。退出动画需要借助状态变量和 onTransitionEnd 实现卸载。若用户取消选择则不执行任何更改。

其他信息 该技能的收费情况、价格、平台支持范围、具体使用效果等,资料中未提供。分类方面,因其用途为在代码库中扫描并改写 React Native 动画代码,属于编程与开发工具。