前端UI组件【免费下载链接】react-motionA spring that solves your animation problems.项目地址https://gitcode.com/gh_mirrors/re/react-motion点击查看免费下载导读react-motion是一个以物理弹簧spring模型驱动 React 动画的库其核心思路是不为动画硬编码时长与缓动曲线而是设定 stiffness刚度与 damping阻尼让数值像真实弹簧一样自然收敛到目标值。本文以仓库内的 HISTORY.md 版本日志为骨架逐版本梳理该库从 0.0.3 到 0.5.x 的完整演进历程重点剖析每次破坏性更新[B]背后的设计动机并结合 src/ 下的源码实现与测试用例验证其最终形态。读完本文你将掌握spring签名变迁、TransitionMotion挂载/卸载动画语义、willEnter/willLeave/didLeave生命周期、presets与reorderKeys等关键 API 的来龙去脉并能在实际项目中正确迁移旧代码。一、文档说明如何解读 HISTORY.mdHISTORY.md 是项目的 Changelog采用了一套简洁的条目分类图例[B]Breaking破坏性更新升级后可能要求改写既有调用代码[F]Fix缺陷修复[I]Improvement改进通常以新增能力或优化为主。从 2015 年 7 月的 0.0.3 首发到 2017 年 8 月的 0.5.1日志忠实记录了每一个版本的门槛变化。需要注意的是日志内嵌的 GitHub issue 链接属于外部引用本文仅以编号如 #296转述其内容读者可在仓库源码与测试中验证对应的实现事实。二、版本时间线速览两年五段式演进版本时间阶段主题0.0.32015-07-09初始发布0.1.02015-07-14命名导出、children 契约、peerDependencies0.2.x2015-07 ~ 2015-08React-Native 支持、presets、willLeave 语义定型0.3.x2015-09 ~ 2015-10API 重构、null/undefined 容错、Flow 起步0.4.x2016-01 ~ 2017-04弹簧配置签名重构、TransitionMotion 全新 API、Flow 全量类型化0.5.x2017-04 ~ 2017-08React 版本收窄、prop-types 迁移、Flow 定义修复截至本仓库package.json 中的版本号为0.5.2而 HISTORY.md 记录到0.5.12017 年 8 月 28 日0.5.1之后的变化如 0.5.2尚未写入日志。三、0.4.0史上最大的一次破坏性更新0.4.02016 年 1 月 26 日是日志中 [B] 条目最密集的版本堪称API 定型的总闸门后续 0.4.x、0.5.x 基本都在此框架内修补。理解它就等于理解了 react-motion 今天的使用方式。3.1spring配置签名从数组到对象变更前spring(10, [120, 12])第二个参数是位置敏感的数组第一个元素是 stiffness、第二个是 damping含义只能靠猜。变更后spring(10, {stiffness: 120, damping: 12})配置改为命名对象。这一改动同时引入了第三个可选字段precision精度默认 0.01用于同时控制插值数值的取整粒度与内部速度阈值即precision tuning。在源码中spring的最终实现极其简洁src/spring.jsconst defaultConfig { ...presets.noWobble, // {stiffness: 170, damping: 26} precision: 0.01, }; export default function spring(val, config) { return { ...defaultConfig, ...config, val }; }可见默认 stiffness170、damping26、precision0.01 正是日志与 README.md 中记载的默认值而val作为目标值被拼进返回的OpaqueConfig。OpaqueConfig的完整类型定义位于 src/Types.js{val, stiffness, damping, precision}其中val必填其余三项可选。3.2style/styles只接受数字或 spring 配置0.4.0 之前Motion的style、StaggeredMotion与TransitionMotion的styles会接受并忽略混入的杂项键值对例如{x: spring(0), y: helloWorld}。0.4.0 起这类非法值被明确拒绝——y这类非插值属性本就不该放在动画配置里而应直接放在实际渲染组件自身的Reactstyle 上。这条规则在类型层面被固化Style { [key: string]: number | OpaqueConfig }、PlainStyle { [key: string]: number }src/Types.js在运行时则由typeof styleValue number分支判断是瞬跳还是弹簧插值参见 src/Motion.js。3.3defaultStyle不再接受 spring 配置Motion的defaultStyle此前被非正式地允许写成{x: spring(0)}。0.4.0 明确废弃该写法defaultStyle表示起点必须是纯数字对象{x: 0}spring 配置只用于style目标值。同样的约束同步施加于StaggeredMotion的defaultStyles与TransitionMotion的defaultStyles、willEnter。3.4willEnter/willLeave签名变更TransitionMotion的willEnter与willLeave回调签名在 0.4.0 中被调整具体格式以 README 与 src/Types.js 为准willEnter: (styleThatEntered: TransitionStyle) PlainStyle返回一个起点值对象willLeave: (styleThatLeft: TransitionStyle) ?Style返回null表示立即移除返回Style表示先动画到该目标值再移除0.4.7 进一步补充了didLeave: (styleThatLeft: {key, data}) void在离场动画真正结束后触发src/Types.js。源码中三者的默认值定义在 src/TransitionMotion.jsstatic defaultProps { willEnter: styleThatEntered stripStyle(styleThatEntered.style), willLeave: () null, // 返回 null 让离场项立即消失 didLeave: () {}, };其中stripStyle的作用是把{x: spring(10), y: spring(20)}剥壳成{x: 10, y: 20}src/stripStyle.js这正是默认从目标值出发动画的语义来源。3.5reorderKeys被移除旧版TransitionMotion依赖reorderKeys辅助函数处理 key 顺序0.4.0 因TransitionMotion的styles数组 API 全面重构该 helper 不再需要并被删除。仓库中 src/react-motion.js 仍保留一个占位导出但 src/reorderKeys.js 的实现已是一个哑函数——仅在 development 环境打印一次警告reorderKeys has been removed...提示迁移到新的 styles 数组 API。3.6 React-Native 专属构建取消0.4.0 移除了 React-Native 专属构建原因是 RN 0.18 已直接使用 vanilla npm React 包不再需要单独导出 wrapper。回顾 0.2.6 时代RN 用户需要require(react-motion/native)才能绕开警告这条特殊路径也随之走进历史。3.7 类型化与性能0.4.0 通过 src/Types.js 的 Flow 类型为全部公共 API 提供完整类型定义SpringHelperConfig、OpaqueConfig、Style、PlainStyle、Velocity、三个组件的 Props 类型与三个回调类型同时包含性能改进并一举修复 #225、#212、#179、#157、#90、#88 等多处历史 bug。四、0.4.x 与 0.5.x定型后的持续修补4.1 0.4.1 ~ 0.4.4发布事故与卸载 bug0.4.1修复 bower 包发布时的一个失误bower 与 npm 双轨发布的版本节奏并不完全同步仓库内 bower.json 版本为 0.5.1 而 package.json 为 0.5.2可视为佐证。0.4.2修复TransitionMotion的 keys 合并 bug#264与罕见的状态过期读取 bug。0.4.4针对组件卸载时 setState 报错给出临时修复该问题在 0.4.8 中由 #420alleycat-at-git进一步根治。查看 src/Motion.js 可以看到raf回调内部再次检查this.unmounting注释中明确引用了 PR #420异步 raf 回调执行时组件可能已经卸载因此必须提前 return避免对已卸载组件调用 setState。4.2 0.4.3onRest与defaultStyles传递修复[F] 修复TransitionMotion的styles函数在首次调用时未收到defaultStyles的问题#296[I] 为Motion新增onRest回调——当动画静止时触发。onRest的实现位于 src/Motion.js当shouldStopAnimation判定无需继续动画且此前确实在动画wasAnimating时调用this.props.onRest()。注意StaggeredMotion与TransitionMotion至今没有onRestREADME 中的原话是还没找到好的语义。4.3 0.4.7didLeave登场0.4.7 为TransitionMotion引入didLeave这是挂载/卸载动画完整闭环的最后一块拼图。在源码 src/TransitionMotion.js 的mergeAndSync中可以看到其触发时机当willLeave返回null或离场样式已满足shouldStopAnimation动画已收敛时立即调用didLeave({key, data})通知 owner 该条目已彻底移除。配套测试见 test/TransitionMotion-test.js。4.4 0.4.8生态依赖与现代 React 迁移0.4.8 是一个内部现代化版本外部化stripStyle#452bearcott使内部工具成为可独立引用/测试的模块迁移废弃的React.PropTypes与React.createClass#446Andarist修复 TypeScript 类型定义链接#443pshrmn、demo 重构与 Flow 检查错误#435therewillbecode、失效链接#430codler修复已卸载组件的 setState#420alleycat-at-git。4.5 0.5.0支持范围收窄与现代类组件0.5.02017 年 4 月 26 日是最后一个 [B] 版本React 支持范围收窄为^0.14.9 || ^15.3.0package.json 的 peerDependencies 最终扩展为^0.14.9 || ^15.3.0 || ^16.0.0所有 React 组件改用 ES6 class 书写——Motion、StaggeredMotion、TransitionMotion的源码均为export default class Xxx extends React.ComponentProps, State如 src/Motion.js用prop-types包替换React.PropTypes三个组件的static propTypes现在统一从prop-types导入见 src/Motion.js、src/StaggeredMotion.js、src/TransitionMotion.js。4.6 0.5.1Flow 定义收尾0.5.12017 年 8 月 28 日是日志中最后的条目更新 Flow 类型定义修复children的入参类型从MotionProps.children的签名可见children 收到的是PlainStyle且返回ReactElement见 src/Types.js。五、0.3.xAPI 大改与 Flow 起步5.1 0.3.0API 全面重构0.3.02015 年 9 月 30 日标记为 API revamp!日志指向 wiki 说明细节。结合前文 0.2.x 时期Spring/TransitionSpring的旧命名可以推断这次重构正是Spring → Motion命名体系与组件拆分的关键转折具体细节在 0.1.0/0.2.x 条目中留有线索。5.2 0.3.1容错与 Flow 半程处理style/styles中的null与undefined#181——willLeave返回null表示立即消失这一约定与此一脉相承库开始部分标注 Flow 类型将src/目录暴露到 npm 上允许import {Motion} from react-motion/src/react-motion直接引用原始源码以利用类型标注。日志明确警告这是实验性、非官方文档化的特性需要自行调整 webpack/browserify 配置。今日 src/react-motion.js 正是全部导出的枢纽Motion、StaggeredMotion、TransitionMotion、spring、presets外加stripStyle与占位的reorderKeys。六、0.2.xReact-Native、presets 与 willLeave 语义定型6.1 0.2.0willLeave 的语义边界0.2.02015 年 7 月 22 日为离场语义划定了清晰边界[B]willLeave返回false时保留该 key只有null与undefined才是移除该 key的信号。这一约定在 src/TransitionMotion.js 中固化为if (leavingStyle null)即调用didLeave并移除。[B] 正确暴露willLeave的第二个参数correspondingValueOfKeyThatJustLeft[F] 修复把 React Element 误判为普通对象的 bug0.1.0 亦修复过一次[F]willLeave现在每个消失的 key 只调用一次此前因实现细节可能多次调用日志提醒本就不该在 willLeave 里放副作用[F] 修复endValue中触发 setState 并卸载组件的竞态——Spring 已排期的requestAnimationFrame不再对已卸载实例多触发一次 setState日志同时强调请不要在 endValue 里放副作用[I] 稳定弹簧算法大量动画项或浏览器标签切换会拖慢 rAF时不再出现抖动#57[I] 通过requestAnimationFramepolyfill 获得对 IE9 的部分或全部支持。6.2 0.2.2 / 0.2.4嵌套弹簧与预设配置0.2.2修复 Ubuntu/Linux 下大小写敏感模块导入问题并让嵌套弹簧恢复工作0.2.4[I] React-Native 支持0.2.6 起为 RN 单独提供react-motion/native路径以消除警告[I] children 函数允许返回null#101当前 src/Motion.js 中return renderedChildren React.Children.only(renderedChildren)正是对 null 返回值的兜底[I]defaultValue用于指定挂载时的默认值[I]TransitionSpring的willLeave简化——要求返回对象而非nullnull仍支持但标记为废弃次版本移除最终语义见 0.2.0[I] 暴露presets预设配置。presets的最终形态位于 src/presets.js四个有品味的默认弹簧配置export default { noWobble: { stiffness: 170, damping: 26 }, // 默认配置 gentle: { stiffness: 120, damping: 14 }, wobbly: { stiffness: 180, damping: 12 }, stiff: { stiffness: 210, damping: 20 }, };spring的默认配置正是展开presets.noWobble后叠加precision: 0.01src/spring.js。日常使用建议直接用预设例如spring(10, presets.wobbly)或spring(20, {...presets.gentle, precision: 0.1})。6.3 0.2.6 / 0.2.7React 版本适配0.2.6React-Native 警告移至独立文件路径RN 用户require(react-motion/native)支持 React 0.14.0-beta10.2.7修复嵌套弹簧不动画的 bug#123支持全部 React 0.14.0 beta。七、0.1.0现代 API 的雏形0.1.02015 年 7 月 14 日确立了几个沿用至今的契约[B]TransitionSpring的willEnter/willLeave回调签名变为(keyThatEnters, correspondingValue, endValueYouJustSpecified, currentInterpolatedValue, currentSpeed)新增correspondingValue作为第二参——这是向按 key 跟踪每个条目演进的重要一步最终在 0.4.0 演进为今日接收整个TransitionStyle对象的签名[B]Spring不再作为默认导出改为命名导出require(react-motion).Spring或import {Spring} from react-motion——0.4.0 的组件更名Spring → Motion正是顺着这条命名导出路线继续前进[B]Spring/TransitionSpring的 children 函数现在期望返回一个 ReactElement组件不再自动包裹一层div#44、#20[I] React 从 dependencies 移到 peerDependencies#35——这为后续 0.5.0 收窄 React 支持范围埋下伏笔[F] 修复 React Element 误判、endValue第一层值意外被{val: ...}包裹等问题。八、底层实现弹簧算法与动画循环无论 API 如何变迁动画的核心始终是 src/stepper.js 中的弹簧积分器它以经典弹簧力学为蓝本const Fspring -k * (x - destX); // 弹簧力k 即 stiffness const Fdamper -b * v; // 阻尼力b 即 damping const a Fspring Fdamper; // 质量视为 1a 即加速度 const newV v a * secondPerFrame; const newX x newV * secondPerFrame;当速度与位置都收敛到precision之内时直接返回目标值并清零速度。Motion/StaggeredMotion/TransitionMotion三个组件共用performance-now计时与raf排帧见 src/Motion.js以msPerFrame 1000 / 60为基准帧长对累计时间做帧追赶framesToCatchUp与帧间插值currentFrameCompletion从而在掉帧或标签页切换后能平滑补帧累计超过 10 帧的时间差会被清零避免长时间后台后一次跳跃式追帧src/Motion.js。这正是 0.2.0 中稳定弹簧算法#57的落地形态。TransitionMotion独有的 key 合并逻辑在 src/TransitionMotion.js 的mergeAndSync中用mergeDiff对比旧合并样式与新的目标样式对消失的 key 调用willLeave返回null则立即移除并触发didLeave对新增的 key 调用willEnter生成起始值再保持当前样式与合并样式按 key 同步的不变式进行插值。这解释了 README 中c从 styles 里消失后依然会被传给 children、直到动画到 0 才真正移除的行为。九、给迁移者的实战要点综合 HISTORY.md 全部破坏性更新可将升级到 0.4.x/0.5.x 的迁移清单归纳如下spring 签名将spring(val, [stiffness, damping])改为spring(val, {stiffness, damping, precision?})可选地使用presets.noWobble/gentle/wobbly/stiff。defaultStyle/defaultStyles只放纯数字起点严禁放 spring 配置spring 只属于目标style/styles。style 值域style中每个值要么是数字瞬跳要么是 spring 返回的配置插值不要混入字符串等无关键值。TransitionMotion 回调willEnter(styleThatEntered)返回PlainStyle起点willLeave(styleThatLeft)返回null立即移除或Style先动画再移除需要知道移除完成时使用didLeave({key, data})。组件引用使用命名导出import {Motion, StaggeredMotion, TransitionMotion, spring, presets} from react-motion不要依赖被删除的reorderKeys引用它会收到 development 警告。React 版本0.5.0 起要求^0.14.9 || ^15.3.0仓库最终支持范围见 package.json组件内部已全部类组件化并基于prop-types。children 返回值children 必须返回单个 ReactElement组件不会自动包div返回null是允许的。仓库 demos/ 下的 8 个示例简单过渡、聊天头像、可拖拽小球、TodoMVC 列表过渡、照片墙、弹簧参数选择器、水波纹、可拖拽列表与 test/ 下的Motion-test.js、StaggeredMotion-test.js、TransitionMotion-test.js、mergeDiff-test.js、stripStyle-test.js均为上述 API 的真实用法与行为断言可作为迁移时的回归参考。结语HISTORY.md 的价值远超流水账它记录了一个动画库从粗糙到精致的整个设计决策过程——弹簧配置从位置数组走向命名对象、组件从包一层 div 到完全交还渲染控制权、挂载/卸载动画从返回 false 保 key走向willLeave/willEnter/didLeave的完整生命周期、类型系统从零走到 Flow 全覆盖。理解这些破坏性更新的动机不仅能让你在使用 0.5.x 时写出更符合设计意图的代码也能在阅读源码时迅速定位每个 API 约定背后的历史原因。赞分享前端UI组件【免费下载链接】react-motionA spring that solves your animation problems.项目地址https://gitcode.com/gh_mirrors/re/react-motion点击查看免费下载相关推荐react-native-router-flux 版本演进全览从 HISTORY.md 读懂路由 API 的设计与变迁react native router flux 版本演进全览从 HISTORY.md 读懂路由 API 的设计与变迁 本文以仓库根目录的 HISTORY.m移动开发UI组件从生成器到 AsyncLocalStorage读懂 Koa History.md 版本演进与 v3 关键变更从生成器到 AsyncLocalStorage读懂 Koa History.md 版本演进与 v3 关键变更 Koa 的 History.md https:/后端Web框架Superstruct 变更史全解读从 0.0.0 到 2.0 的 API 演进、破坏性变更与升级迁移指南Superstruct 变更史全解读从 0.0.0 到 2.0 的 API 演进、破坏性变更与升级迁移指南 导读本文以 Changelog.md https开发工具上一篇MAA助手重新定义《明日方舟》游戏体验的智能自动化工具下一篇NBTExplorer终极指南图形化编辑我的世界游戏数据的完整解决方案创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考