react-native-reanimated 1.xset节点深度解析声明式动画数据流中的赋值核心【免费下载链接】react-native-reanimatedReact Natives Animated library reimplemented项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimatedset是 react-native-reanimated 1.x 声明式节点体系中最重要的基础节点之一它负责在动画节点图中完成赋值这一动作把一个源节点sourceNode的求值结果写入一个可变的Animated.Value。本文以 version-1.x 的set节点文档 为骨架结合同一文档树下的block、cond、Animated.Code、useCode等配套用法以及当前仓库源码中的可变值SharedValue类型定义完整讲解set的签名、求值语义、返回值行为并给出可复制、可运行的实战组合方案。读完后你将掌握如何用set驱动时钟动画状态机、派生中间值以及它在 1.x 声明式 API 中的地位。set节点签名与一句话语义按照原文档的定义set节点的签名非常简单set(valueToBeUpdated, sourceNode);其核心语义可以拆解为三点求值时执行赋值当set节点在动画节点图中被求值evaluated时它会计算sourceNode的值并将该值写入第一个参数valueToBeUpdated指向的Animated.Value。本质是一次赋值运算它执行的操作等价于一次从sourceNode到valueToBeUpdated的赋值语句assignment operation只不过这段语句以节点node的形式存在从而可以被编排进声明式的节点图中。返回被赋的值set节点同时也是一个表达式节点它会把本次赋值的结果作为自身返回值因此可以嵌套在其他节点如block、cond、onChange内部使用。需要先说明的是本文讨论的是version-1.x文档树所描述的 1.x 节点式 APINode API。从当前仓库的源码结构看packages/react-native-reanimated/src中已经不再包含AnimatedSet之类的节点类实现这套节点体系在后继版本中已被 worklet shared value 的新架构取代但这并不影响set所表达的在动画帧中更新值这一核心思想在当代 API 中的延续——例如 commonTypes.ts 中SharedValue.set(value)与Mutable._value的角色划分依然可以看到赋值语义的身影。本文的一切示例均以 1.x 文档为准。参数详解目标必须是可变节点源可以是任意表达式第一个参数valueToBeUpdatedvalueToBeUpdated必须是一个可被写入的可变节点最常见的就是通过new Value(0)创建的Animated.Value实例。例如在 声明式动画 API 文档 的runTiming示例中被写入的目标既有动画状态对象state的字段也有配置对象config的字段const state { finished: new Value(0), position: new Value(0), time: new Value(0), frameTime: new Value(0), }; const config { duration: 5000, toValue: new Value(0), easing: Easing.inOut(Easing.ease), };这些字段全部是Value实例因此都可以作为set的目标。注意set不会创建新的值它只是修改既有Animated.Value在 UI 线程上维护的当前值这正是它与纯函数式节点如add、multiply的本质区别——set在节点图内部引入了可变状态。第二个参数sourceNodesourceNode是任意求值后能产生数值的节点或节点表达式可以是一个常量数字set(state.finished, 0)另一个Animated.Valueset(config.toValue, dest)由多个节点组合而成的表达式set(this.transX1, add(multiply(-1, this._transX)))甚至可以是另一个set节点的返回值因为set返回被赋的值返回值语义可嵌套、可被外层节点消费set的返回值等于被赋进去的值这一点让它天然适合嵌入到block与cond中作为带副作用的表达式使用。配合block按顺序执行一组赋值block节点 会按数组顺序依次求值所有子节点并返回最后一个节点的值。把多个set放进block就得到了一个顺序执行的赋值语句序列block([ set(state.finished, 0), set(state.time, 0), set(state.position, value), set(state.frameTime, 0), set(config.toValue, dest), startClock(clock), ]);这是 declarative.md 中时钟未运行时重置全部动画参数的标准写法一次求值完成 5 个状态的复位并启动时钟block最终返回startClock的结果。配合cond分支中的条件赋值cond节点 根据条件节点决定求值ifNode还是可选的elseNode。set经常作为这两个分支中的动作节点出现。还是以runTiming为例cond( clockRunning(clock), [ // 时钟已在运行仅更新目标值以响应新的 dest set(config.toValue, dest), ], [ // 时钟未运行重置全部参数并启动时钟 set(state.finished, 0), set(state.time, 0), set(state.position, value), set(state.frameTime, 0), set(config.toValue, dest), startClock(clock), ] )这里cond的两个分支分别传入节点数组等价于隐式block通过set完成复用时钟时仅改目标值与首次启动时全量复位两种截然不同的赋值路径体现了set在状态机建模中的灵活性。实战场景一用set搭建时钟驱动的动画状态机下面把 declarative.md 中的完整runTiming示例展开它集中展示了set在经典 timing 动画中的全部用法状态复位、目标值更新、返回值传递。import Animated, { Easing } from react-native-reanimated; const { Clock, Value, set, cond, startClock, clockRunning, timing, debug, stopClock, block, } Animated; function runTiming(clock, value, dest) { const state { finished: new Value(0), position: new Value(0), time: new Value(0), frameTime: new Value(0), }; const config { duration: 5000, toValue: new Value(0), easing: Easing.inOut(Easing.ease), }; return block([ cond( clockRunning(clock), [ // 时钟已在运行更新 toValue以响应新传入的 dest set(config.toValue, dest), ], [ // 时钟未运行重置全部动画参数并启动时钟 set(state.finished, 0), set(state.time, 0), set(state.position, value), set(state.frameTime, 0), set(config.toValue, dest), startClock(clock), ] ), // 运行单步动画节点更新 position timing(clock, state, config), // 动画结束时停止时钟 cond(state.finished, debug(stop clock, stopClock(clock))), // block 返回最新位置供 transform 消费 state.position, ]); } export class AnimatedBox extends Component { clock new Clock(); // 把 runTiming 产出的节点直接映射到 translateX transX runTiming(this.clock, -120, 120); render() { return ( View style{styles.container} Animated.View style{[styles.box, { transform: [{ translateX: this.transX }] }]} / /View ); } }几个值得注意的set使用细节首次启动的分支中set(state.position, value)把传入的初始位置写入状态保证动画从正确起点开始运行中的分支只有一条set(config.toValue, dest)实现动画进行中动态改目标值的效果动画结束后通过cond(state.finished, ...)停止时钟而state.finished正是由timing节点内部通过set写入的结合clockRunning节点 可了解时钟状态的读取方式。实战场景二在Animated.Code/useCode中做响应式派生赋值set的另一种高频用法是配合 Animated.Code 与 useCode。Animated.Code组件渲染为null允许你把与视图属性无直接关系的节点逻辑挂载到组件生命周期中在挂载时执行一次。Animated.Code {() block([ set(this.transX1, add(multiply(-1, this._transX))), set(this.transX2, add(multiply(-2, this._transX), 120)), set(this.transX3, sub(multiply(2, this._transX), 120)), set(this.transX4, add(multiply(1, this._transX))), ]) } /Animated.Code也可用exec属性传入预先构造好的节点Animated.Code exec{block([ set(this.transX1, add(multiply(-1, this._transX))), set(this.transX2, add(multiply(-2, this._transX), 120)), set(this.transX3, sub(multiply(2, this._transX), 120)), set(this.transX4, add(multiply(1, this._transX))), ])} /注意Animated.Code内的代码只在componentDidMount时执行一次如果你希望依赖更新时重新求值应改用useCodehookReact Native 0.59 不支持。useCode的第二个参数是依赖数组依赖变化时会重新挂载节点逻辑const [animated, setAnimated] React.useState(false); const [offset, setOffset] React.useState(20); Animated.useCode( () animated [ set(transX1, add(_transX, offset)), ], [animated, offset] );这里set让transX1始终跟随_transX offset的派生关系是典型的由源值驱动目标值的声明式写法官方文档还建议配合react-hooks/exhaustive-depsESLint 规则使用。实战场景三与onChange组合监听值变化再赋值set也常作为onChange节点 的动作参数使用。onChange(value, action)会在value相比上一次求值发生变化时求值actiononChange( someValue, set(anotherValue, someValue) );当someValue发生变化时把它的最新值同步写入anotherValue。这种监听-赋值的组合适合实现级联同步、联动换算等派生逻辑也是 1.x 中模拟响应式数据流的标准手段。源码视角set与可变值模型的对应关系虽然 1.x 的set节点类在当前仓库源码中已不存在但其赋值的语义在当代实现里仍有清晰的对应物。在 packages/react-native-reanimated/src/commonTypes.ts 中SharedValue接口定义了value: Value、get(): Value与set(value)方法——后者正是把新值写入共享值的当代等价物Mutable接口进一步补充了_value字段且源码注释明确说明_value只能由valueSetter实现访问其余代码一律通过直接赋值.value或调用.set()修改值类型SharedValueDisableContravariance通过OmitSharedValueValue, set | modify剔除赋值类方法用于解决AnimatedProps/AnimatedStyle场景下的逆变类型问题。这组类型定义印证了赋值操作是动画值体系的一等公民这一设计取向无论是 1.x 的set(valueToBeUpdated, sourceNode)节点还是后续版本的sharedValue.set(value)核心都是把计算所得的值写入可变目标从而驱动 UI 更新。使用set的注意事项结合上述文档与示例总结几条实践要点目标必须是可变节点valueToBeUpdated只能是Value实例或其容器字段不能是add、multiply之类的纯函数节点否则没有可写入的状态。set有副作用依赖求值时机它只在实际被求值时生效因此要把它放进block、cond分支或Animated.Code/useCode中确保它在正确的帧内被执行。返回值可用于表达式需要赋值的同时把值继续向上传递时直接消费set的返回值即可无需再单独读取目标值节点。批量赋值用block组织多个set放在一个block里按顺序执行是构建动画状态机如runTiming中的状态复位的推荐结构。动态目标值靠set实现在时钟运行中通过set(config.toValue, dest)更新目标值是 1.x 中实现运行中改目标的关键技巧。小结set(valueToBeUpdated, sourceNode)是 react-native-reanimated 1.x 声明式节点图中唯一的赋值入口求值时把源节点结果写入目标Animated.Value并返回被赋的值。它看似简单却是时钟动画状态机runTiming、派生值同步Animated.Code/useCode、值变化监听onChange等几乎所有复杂节点编排的基石。结合 nodes/set.md 的原始定义、declarative.md 与 code.md 的完整示例以及 commonTypes.ts 中可变值模型的当代对应你可以完整理解这一节点在 1.x 架构中的角色并把它迁移到对新架构 shared value 赋值的理解中去。【免费下载链接】react-native-reanimatedReact Natives Animated library reimplemented项目地址: https://gitcode.com/GitHub_Trending/re/react-native-reanimated创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考