从 1.x 迁移到 2.xreact-native-reanimated 渐进式迁移指南interpolateNode 与 EasingNode【免费下载链接】react-native-reanimatedReact Natives Animated library reimplemented项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated本文基于react-native-reanimated官方 v3.x 文档中的 migration-from-1.x.md 撰写系统梳理从 Reanimated 1.x 迁移到 2.x 时的设计思路、命名冲突处理策略与两个必须关注的重命名方法并辅以仓库内 v1.x 历史文档与当前源码进行佐证。读完本文你将掌握新旧 API 共存的渐进式迁移方法能够在自己的动画代码中准确区分并替换interpolate/Easing的旧版用法并为后续平滑升级到 3.x 做好准备。迁移背景为什么 1.x 可以渐进式迁移Reanimated 1 与 Reanimated 2 在底层执行模型上差异巨大1.x 基于在 JS 线程上运行的动画节点图node graph而 2.x 将 worklet 直接调度到 UI 线程执行。理论上这属于破坏性重构但官方在迁移策略上做了一个关键决策安装 Reanimated 2 之后旧 API 与新 API 可以同时使用。也就是说升级依赖后不需要一次性重写全部动画代码可以逐文件、逐动画地迁移。同一个包内保留了最新稳定版 Reanimated 1 的 API开发者可以在新代码里使用 2.x 的新写法同时让旧代码暂时继续运行实现平滑过渡。这一策略的直接后果是引入了命名冲突问题——新旧两套 API 存在于同一个命名空间中必然会出现同名函数。官方解决冲突的原则是只要与 Reanimated 1 发生命名冲突就重命名 Reanimated 1 版本的方法以保持 Reanimated 2 的命名更干净。换句话说新 API 的名称是一等公民被保留下来旧 API 被迫改名以Node后缀等标识符区分。这样做的代价是引入了一小部分破坏性变更但受益于被重命名的方法数量相对较少而且这些方法的使用频率本身也不高迁移成本被控制在可接受范围内。从仓库中的 v3.x 迁移文档 migration-from-2.x.md 可以看到这一策略的最终走向Reanimated 3.x 已经完全移除Reanimated 1.x API任何 2.x 代码无需修改即可运行在 3.x 上。因此尽快完成 1.x → 2.x 的迁移成为能否顺利升级到 3.x 的前提条件。重命名方法总览官方明确列出了两个需要开发者手工处理的重命名方法这是 1.x → 2.x 迁移中仅有的两处 API 破坏性变更1.x 旧名称2.x 新名称迁移动作interpolate作为模块函数导入interpolateNode修改 import 与调用处Easing作为模块对象导入EasingNode修改 import 与调用处需要注意的是重命名仅针对从react-native-reanimated包直接导入的函数/对象。如果你使用的是AnimatedValue实例上的类成员方法详见下文则无需任何改动。重命名 1interpolate→interpolateNode旧版用法1.x在 Reanimated 1.x 中interpolate是动画节点系统的一部分需要传入一个节点作为第一个参数并提供一个配置对象。仓库中的 v1.x 历史文档 nodes/interpolate.md 完整记录了其签名interpolate(node, { // Input range for the interpolation. Should be monotonically increasing. inputRange: [nodeOrValue...], // Output range for the interpolation, should be the same length as the input range. outputRange: [nodeOrValue...], // Sets the left and right extrapolate modes. extrapolate?: Extrapolate.EXTEND | Extrapolate.CLAMP | Extrapolate.IDENTITY, // Set the left extrapolate mode, the behavior if the input is less than the first value in inputRange. extrapolateLeft?: Extrapolate.EXTEND | Extrapolate.CLAMP | Extrapolate.IDENTITY, // Set the right extrapolate mode, the behavior if the input is greater than the last value in inputRange. extrapolateRight?: Extrapolate.EXTEND | Extrapolate.CLAMP | Extrapolate.IDENTITY, })其中三种外推extrapolate模式的含义为Extrapolate.EXTEND超出范围时按当前斜率线性延伸Extrapolate.CLAMP超出范围时钳制在边界值Extrapolate.IDENTITY超出范围时直接返回输入值本身。典型用法是结合concat生成带单位的字符串例如 1.x 中把 0360 的节点值映射为旋转角度concat( interpolate(node, { inputRange: [0, 360], outputRange: [0, 360] }), deg );此外v1.x 文档特别提示颜色插值不要用interpolate应使用interpolateColors见 nodes/interpolateColors.md因为旧版interpolate对字符串类型如颜色的输出支持有限。迁移后的写法2.x在 2.x 中如果代码里是从react-native-reanimated直接 import 的interpolate这种 1.x 用法应改为interpolateNodeimport { interpolateNode } from react-native-reanimated;而新 API 的同名函数interpolate则属于 2.x 的 worklet 体系其函数签名完全不同——不再接收节点和配置对象而是接收三个位置参数。当前仓库源码 interpolation.ts 中定义了该函数export function interpolate( value: number, inputRange: readonly number[], outputRange: readonly number[], type?: ExtrapolationType ): number从源码可以看出新版interpolate是一个标注了worklet的函数在 UI 线程上直接对数值进行线性映射inputRange与outputRange必须至少包含两个值否则会抛出[Reanimated] Interpolation input and output ranges should contain at least two values.的运行时错误插值区间内部通过二分查找定位value所处的分段再调用内部插值逻辑外推行为由第四参数type控制默认两侧均为Extrapolation.EXTEND。新旧两个同名函数并存正是命名冲突的直接体现——因此迁移时务必确认凡是旧式节点风格的interpolate(node, { ... })调用一律改名interpolateNode凡是新式interpolate(value, inputRange, outputRange)调用保持interpolate不变。重命名 2Easing→EasingNode第二个重命名针对缓动函数模块。1.x 中从react-native-reanimated导入的Easing在 2.x 中应改为EasingNode// 1.x import { Easing } from react-native-reanimated; // 2.x沿用 1.x 节点风格时 import { EasingNode } from react-native-reanimated;Easing模块本身承载了一整套缓动曲线函数。当前仓库源码 Easing.ts 对模块能力有系统说明可帮助理解旧版EasingNode背后的函数集合预定义动画back先回退再前进、bounce弹跳、ease惯性缓动、elastic弹性交互标准函数linear、quad、cubic以及可用poly实现的 quartic、quintic 等高次幂函数附加数学函数bezier三次贝塞尔曲线、circle圆形缓动、sin正弦缓动、exp指数缓动修饰辅助函数in正向运行、out反向运行、inOut对称化。从源码看这些缓动函数全部以worklet标注例如linear实现为f(t) tease内部通过Bezier(0.42, 0, 1, 1)(t)实现标准惯性曲线Easing.ts。因此如果代码中仍在使用 1.x 的节点风格动画如Animated.timing配合Easing节点迁移时只需把导入名称改为EasingNode如果已经切换到 2.x 的withTiming等新 API则继续使用Easing即可新版Easing在 index.ts 中被正式导出。无需改动的场景AnimatedValue.interpolate并非所有interpolate都需要改名。官方明确指出如果使用的是类成员方法AnimatedValue.interpolate则无需任何改动。也就是说如果你在 1.x 中是通过Animated.Value实例调用插值例如const value new Animated.Value(0); value.interpolate({ inputRange: [0, 100], outputRange: [0, 1] });这种实例方法调用不构成命名冲突AnimatedValue.interpolate在 2.x 中继续保留原名直接沿用即可。迁移路线图与后续升级综合本指南与 v3.x 的 migration-from-2.x.md 文档推荐的迁移路线为升级到 2.x安装 Reanimated 2.x 后新旧 API 同时可用业务代码不阻塞。逐处替换旧 API将模块级导入的interpolate改为interpolateNode将模块级导入的Easing改为EasingNodeAnimatedValue.interpolate实例方法保持原样新写的动画代码优先使用 2.x 的useSharedValue、useAnimatedStyle、withTiming、withSpring以及新签名interpolate(value, inputRange, outputRange)。验证功能等价性替换后核对插值范围与外推模式EXTEND/CLAMP/IDENTITY是否保持原有行为颜色插值确认已改用interpolateColors。升级到 3.x2.x → 3.x 在 API 层面不引入任何破坏性变更且 3.x 已彻底移除 1.x API——完成前两步后即可无障碍升级。小结Reanimated 1.x → 2.x 的迁移被刻意设计为渐进式新旧 API 在同一包内共存官方通过重命名旧 API而非破坏新 API的方式解决命名冲突。开发者实际需要处理的只有两处——interpolate→interpolateNode、Easing→EasingNode而AnimatedValue.interpolate类成员方法无需改动。尽早完成这两处替换即可为后续平滑升级到完全移除 1.x API 的 3.x 版本铺平道路。进一步参考v1.x 插值节点文档 与 v1.x 颜色插值文档了解旧 API 的完整签名与边界行为v3.x 从 2.x 迁移文档确认 2.x → 3.x 无破坏性变更新版 interpolate 源码 与 Easing 模块源码理解新 API 的工作机制与可用缓动函数全集。【免费下载链接】react-native-reanimatedReact Natives Animated library reimplemented项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
从 1.x 迁移到 2.x：react-native-reanimated 渐进式迁移指南（interpolateNode 与 EasingNode）
从 1.x 迁移到 2.xreact-native-reanimated 渐进式迁移指南interpolateNode 与 EasingNode【免费下载链接】react-native-reanimatedReact Natives Animated library reimplemented项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated本文基于react-native-reanimated官方 v3.x 文档中的 migration-from-1.x.md 撰写系统梳理从 Reanimated 1.x 迁移到 2.x 时的设计思路、命名冲突处理策略与两个必须关注的重命名方法并辅以仓库内 v1.x 历史文档与当前源码进行佐证。读完本文你将掌握新旧 API 共存的渐进式迁移方法能够在自己的动画代码中准确区分并替换interpolate/Easing的旧版用法并为后续平滑升级到 3.x 做好准备。迁移背景为什么 1.x 可以渐进式迁移Reanimated 1 与 Reanimated 2 在底层执行模型上差异巨大1.x 基于在 JS 线程上运行的动画节点图node graph而 2.x 将 worklet 直接调度到 UI 线程执行。理论上这属于破坏性重构但官方在迁移策略上做了一个关键决策安装 Reanimated 2 之后旧 API 与新 API 可以同时使用。也就是说升级依赖后不需要一次性重写全部动画代码可以逐文件、逐动画地迁移。同一个包内保留了最新稳定版 Reanimated 1 的 API开发者可以在新代码里使用 2.x 的新写法同时让旧代码暂时继续运行实现平滑过渡。这一策略的直接后果是引入了命名冲突问题——新旧两套 API 存在于同一个命名空间中必然会出现同名函数。官方解决冲突的原则是只要与 Reanimated 1 发生命名冲突就重命名 Reanimated 1 版本的方法以保持 Reanimated 2 的命名更干净。换句话说新 API 的名称是一等公民被保留下来旧 API 被迫改名以Node后缀等标识符区分。这样做的代价是引入了一小部分破坏性变更但受益于被重命名的方法数量相对较少而且这些方法的使用频率本身也不高迁移成本被控制在可接受范围内。从仓库中的 v3.x 迁移文档 migration-from-2.x.md 可以看到这一策略的最终走向Reanimated 3.x 已经完全移除Reanimated 1.x API任何 2.x 代码无需修改即可运行在 3.x 上。因此尽快完成 1.x → 2.x 的迁移成为能否顺利升级到 3.x 的前提条件。重命名方法总览官方明确列出了两个需要开发者手工处理的重命名方法这是 1.x → 2.x 迁移中仅有的两处 API 破坏性变更1.x 旧名称2.x 新名称迁移动作interpolate作为模块函数导入interpolateNode修改 import 与调用处Easing作为模块对象导入EasingNode修改 import 与调用处需要注意的是重命名仅针对从react-native-reanimated包直接导入的函数/对象。如果你使用的是AnimatedValue实例上的类成员方法详见下文则无需任何改动。重命名 1interpolate→interpolateNode旧版用法1.x在 Reanimated 1.x 中interpolate是动画节点系统的一部分需要传入一个节点作为第一个参数并提供一个配置对象。仓库中的 v1.x 历史文档 nodes/interpolate.md 完整记录了其签名interpolate(node, { // Input range for the interpolation. Should be monotonically increasing. inputRange: [nodeOrValue...], // Output range for the interpolation, should be the same length as the input range. outputRange: [nodeOrValue...], // Sets the left and right extrapolate modes. extrapolate?: Extrapolate.EXTEND | Extrapolate.CLAMP | Extrapolate.IDENTITY, // Set the left extrapolate mode, the behavior if the input is less than the first value in inputRange. extrapolateLeft?: Extrapolate.EXTEND | Extrapolate.CLAMP | Extrapolate.IDENTITY, // Set the right extrapolate mode, the behavior if the input is greater than the last value in inputRange. extrapolateRight?: Extrapolate.EXTEND | Extrapolate.CLAMP | Extrapolate.IDENTITY, })其中三种外推extrapolate模式的含义为Extrapolate.EXTEND超出范围时按当前斜率线性延伸Extrapolate.CLAMP超出范围时钳制在边界值Extrapolate.IDENTITY超出范围时直接返回输入值本身。典型用法是结合concat生成带单位的字符串例如 1.x 中把 0360 的节点值映射为旋转角度concat( interpolate(node, { inputRange: [0, 360], outputRange: [0, 360] }), deg );此外v1.x 文档特别提示颜色插值不要用interpolate应使用interpolateColors见 nodes/interpolateColors.md因为旧版interpolate对字符串类型如颜色的输出支持有限。迁移后的写法2.x在 2.x 中如果代码里是从react-native-reanimated直接 import 的interpolate这种 1.x 用法应改为interpolateNodeimport { interpolateNode } from react-native-reanimated;而新 API 的同名函数interpolate则属于 2.x 的 worklet 体系其函数签名完全不同——不再接收节点和配置对象而是接收三个位置参数。当前仓库源码 interpolation.ts 中定义了该函数export function interpolate( value: number, inputRange: readonly number[], outputRange: readonly number[], type?: ExtrapolationType ): number从源码可以看出新版interpolate是一个标注了worklet的函数在 UI 线程上直接对数值进行线性映射inputRange与outputRange必须至少包含两个值否则会抛出[Reanimated] Interpolation input and output ranges should contain at least two values.的运行时错误插值区间内部通过二分查找定位value所处的分段再调用内部插值逻辑外推行为由第四参数type控制默认两侧均为Extrapolation.EXTEND。新旧两个同名函数并存正是命名冲突的直接体现——因此迁移时务必确认凡是旧式节点风格的interpolate(node, { ... })调用一律改名interpolateNode凡是新式interpolate(value, inputRange, outputRange)调用保持interpolate不变。重命名 2Easing→EasingNode第二个重命名针对缓动函数模块。1.x 中从react-native-reanimated导入的Easing在 2.x 中应改为EasingNode// 1.x import { Easing } from react-native-reanimated; // 2.x沿用 1.x 节点风格时 import { EasingNode } from react-native-reanimated;Easing模块本身承载了一整套缓动曲线函数。当前仓库源码 Easing.ts 对模块能力有系统说明可帮助理解旧版EasingNode背后的函数集合预定义动画back先回退再前进、bounce弹跳、ease惯性缓动、elastic弹性交互标准函数linear、quad、cubic以及可用poly实现的 quartic、quintic 等高次幂函数附加数学函数bezier三次贝塞尔曲线、circle圆形缓动、sin正弦缓动、exp指数缓动修饰辅助函数in正向运行、out反向运行、inOut对称化。从源码看这些缓动函数全部以worklet标注例如linear实现为f(t) tease内部通过Bezier(0.42, 0, 1, 1)(t)实现标准惯性曲线Easing.ts。因此如果代码中仍在使用 1.x 的节点风格动画如Animated.timing配合Easing节点迁移时只需把导入名称改为EasingNode如果已经切换到 2.x 的withTiming等新 API则继续使用Easing即可新版Easing在 index.ts 中被正式导出。无需改动的场景AnimatedValue.interpolate并非所有interpolate都需要改名。官方明确指出如果使用的是类成员方法AnimatedValue.interpolate则无需任何改动。也就是说如果你在 1.x 中是通过Animated.Value实例调用插值例如const value new Animated.Value(0); value.interpolate({ inputRange: [0, 100], outputRange: [0, 1] });这种实例方法调用不构成命名冲突AnimatedValue.interpolate在 2.x 中继续保留原名直接沿用即可。迁移路线图与后续升级综合本指南与 v3.x 的 migration-from-2.x.md 文档推荐的迁移路线为升级到 2.x安装 Reanimated 2.x 后新旧 API 同时可用业务代码不阻塞。逐处替换旧 API将模块级导入的interpolate改为interpolateNode将模块级导入的Easing改为EasingNodeAnimatedValue.interpolate实例方法保持原样新写的动画代码优先使用 2.x 的useSharedValue、useAnimatedStyle、withTiming、withSpring以及新签名interpolate(value, inputRange, outputRange)。验证功能等价性替换后核对插值范围与外推模式EXTEND/CLAMP/IDENTITY是否保持原有行为颜色插值确认已改用interpolateColors。升级到 3.x2.x → 3.x 在 API 层面不引入任何破坏性变更且 3.x 已彻底移除 1.x API——完成前两步后即可无障碍升级。小结Reanimated 1.x → 2.x 的迁移被刻意设计为渐进式新旧 API 在同一包内共存官方通过重命名旧 API而非破坏新 API的方式解决命名冲突。开发者实际需要处理的只有两处——interpolate→interpolateNode、Easing→EasingNode而AnimatedValue.interpolate类成员方法无需改动。尽早完成这两处替换即可为后续平滑升级到完全移除 1.x API 的 3.x 版本铺平道路。进一步参考v1.x 插值节点文档 与 v1.x 颜色插值文档了解旧 API 的完整签名与边界行为v3.x 从 2.x 迁移文档确认 2.x → 3.x 无破坏性变更新版 interpolate 源码 与 Easing 模块源码理解新 API 的工作机制与可用缓动函数全集。【免费下载链接】react-native-reanimatedReact Natives Animated library reimplemented项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
