react-motion-layout 快速上手10分钟从安装到运行第一个 Hero 过渡动画【免费下载链接】react-motion-layout Beautiful immersive React hero animations.项目地址: https://gitcode.com/gh_mirrors/re/react-motion-layoutreact-motion-layout 是一个轻量级 React 过渡动画库能帮你用共享组件在两个页面之间实现沉浸式的Hero 过渡动画Hero Animation——无需外部状态管理与 React Router 无缝集成。本文将带你 10 分钟完成安装并跑通第一个从卡片列表到详情页的 Hero 过渡效果。为什么选择 react-motion-layout 做 Hero 过渡动画 framer-motion 等库擅长组件挂载/卸载时的入场动效但无法让同一张图片在两个不同路由上连贯飞行。而 react-motion-layout 的核心能力正是把两个视图中的相同元素关联起来在切换视图时自动完成位置、尺寸、透明度的平滑过渡。它的三大优点✅声明式Declarative只需把图片或文字包进SharedElement组件✅零依赖Isolated不要求 Redux 等外部状态管理库✅路由就绪Router Ready通过useMotion钩子或RouterLink组件即可在路由切换时触发动画浏览器兼容也很友好Chrome 56、Firefox 27、Safari 7.1iOS、IE10 等主流现代浏览器全部支持。环境准备react-motion-layout 安装前要求开始前请确认你的项目满足以下版本要求依赖版本要求React16.8支持 Hooksreact-router-dom5.0.1包管理器npm / yarn 均可一键安装步骤npm 安装 react-motion-layout在你的 React 项目根目录执行npm i react-router-dom react-motion-layout --save安装完成后即可从包名直接导入所有组件。整个库体积小巧源码入口见src/index.js导出了 4 个核心组件和 1 个 Hookexport { default as MotionScene } from ./components/MotionScene; export { default as MotionLayoutProvider } from ./components/MotionProvider; export { default as useMotion } from ./hooks/useMotion; export { default as MotionScreen } from ./components/MotionScreen; export { default as RouterLink } from ./components/RouterLink; export const SharedElement { Image, Text, Div };10分钟跑通Hero 过渡动画的 4 个核心概念理解这 4 个组件就理解了 react-motion-layout 的全部原理 1️⃣ MotionLayoutProvider全局动画状态容器放在应用最外层负责创建渲染过渡元素的 React Portal 并管理内部状态。// app.js import { MotionLayoutProvider } from react-motion-layout; ReactDOM.render( MotionLayoutProvider Switch Route path/story/:storyIdStory //Route Route path/Feed //Route /Switch /MotionLayoutProvider, document.getElementById(root) );2️⃣ MotionScreen标记每一屏用MotionScreen包裹每个独立的路由页面。当一个视图包含多个MotionScene时它帮助系统判断该对哪个场景做动画并在离开页面时清理已注册元素。3️⃣ MotionScene SharedElement定义共享元素MotionScene是动画的舞台接收name场景名用于匹配目标和easing缓动函数等属性。舞台上的SharedElement.Image/SharedElement.Text/SharedElement.Div就是会被动画的元素它们必须带有唯一且一致的animationKey——系统靠这个 key 在新旧视图中找到对应元素并自动计算过渡轨迹。4️⃣ useMotion 钩子点击触发过渡动画useMotion(sceneName)返回一个函数接受回调并在动画启动后执行它——通常就是路由跳转。这就是先动画、后跳转的秘密const withTransition useMotion(story-${data.id}); const callback useCallback(() history.push(/story/${data.id})); return ( MotionScene name{story-${data.id}} onClick{withTransition(callback)} SharedElement.Image animationKeybig-image src{data.image} / SharedElement.Text animationKeytext-main{data.text}/SharedElement.Text /MotionScene );完整示例10分钟写出你的第一个 Hero 过渡动画 以信息流 → 故事详情为例只需 5 步app.js外层包上MotionLayoutProvider见上文数据准备定义几条带id、text、image的示例数据Feed 页用MotionScreen包裹列表Item 卡片用MotionScene包裹内部放SharedElement.Image与SharedElement.Text点击时用withTransition(callback)触发跳转Story 详情页同样用MotionScreenMotionScene包裹保持name与animationKey完全一致MotionScreen MotionScene name{story-${storyId}} scrollUpOnEnter SharedElement.Text animationKeytext-main{text}/SharedElement.Text SharedElement.Image animationKeybig-image src{image} / /MotionScene /MotionScreen启动开发服务器点击列表中的任意卡片——图片会从小卡片飞成详情页大图文字同步位移一个标准的 Hero 过渡动画就完成了 小贴士Motion Layout 会自动检测源/目标的尺寸与位置来生成平滑动画你不需要手写任何 CSS keyframesscrollUpOnEnter属性还能让详情页进入时自动滚回顶部。常见问题与避坑清单 ⚠️问题原因与解决点击后没有任何动画源/目标MotionScene的name不一致或animationKey拼写不同动画闪烁或缺失忘记用MotionScreen包裹路由页面或未在最外层放MotionLayoutProvider想用 react-router-dom 的Link改用 react-motion-layout 提供的RouterLink它渲染的就是标准Link且能自动触发动画两端需被MotionScreen包裹想做单向动画给MotionScreen加onEnter/onExit布尔属性控制入场/退场核心文件导览想深入源码或文档可以从以下位置入手快速上手示例Feed Story 完整代码website/docs/animating.md安装指南website/docs/installation.md组件 API 文档website/docs/MotionScene.md、website/docs/MotionScreen.md、website/docs/useMotion.md、website/docs/RouterLink.md核心组件源码src/components/MotionScene.jsx、src/components/MotionScreen.jsx共享元素实现src/components/Elements/Image.jsx、src/components/Elements/Text.jsx动画 Hooksrc/hooks/useMotion.js只要记住Provider 包住应用、Screen 包住页面、Scene 包住元素、Key 保持唯一这四句话你就可以用 react-motion-layout 为自己的 React 应用打造丝滑的 Hero 过渡动画了。【免费下载链接】react-motion-layout Beautiful immersive React hero animations.项目地址: https://gitcode.com/gh_mirrors/re/react-motion-layout创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考