motion

Motion 是一个面向 JavaScript、React 和 Vue 的开源动画库。它提供简洁的 API，原生支持多个平台，采用将 JavaScript 与浏览器原生 API 相结合的混合动画引擎，可实现 120fps GPU 加速动画，并具备生产级特性，包括 TypeScript 支持、全面的测试套件、可摇树优化的构建以及极小的体积。开箱即用：手势、弹簧、布局过渡、滚动联动效果和时间线。

该技能基于 Motion v12.29.2，生成于 2026-02-01。

核心参考

主题	描述	参考
Motion 组件	基础 motion 组件（motion.div、motion.svg 等）	core-components
基础动画	animate 属性、initial、while 状态	core-animation
JavaScript animate()	原生 animate()、序列、createScopedAnimate	core-javascript-animate
原生 scroll()	用于非 React 的命令式 scroll() 和 scrollInfo()	core-vanilla-scroll
motionValue	在不使用 React 的情况下创建 MotionValue	core-vanilla-motion-value
stagger	在变体中编排子元素的延迟	core-stagger
frame / cancelFrame	Motion 的动画循环	core-frameloop
motion/mini	最小化打包入口	core-motion-mini
变体	声明式动画变体与编排	core-variants
过渡	动画时序、缓动、弹簧物理	core-transitions

Motion 值

主题	描述	参考
useMotionValue	创建并使用 motion 值以实现响应式动画	values-motion-value
useSpring	基于弹簧物理的 motion 值	values-spring
useTransform	使用函数转换 motion 值	values-transform
useMotionTemplate	将 motion 值组合为字符串（例如 filter、boxShadow）	values-motion-template
useFollowValue	以任意过渡跟随源值的 motion 值	values-follow
useScroll	滚动联动的 motion 值与动画	values-scroll
useVelocity	访问 motion 值的速度	values-velocity
useTime	基于时间的 motion 值	values-time
useWillChange	用于动画元素的 GPU 图层提示	values-will-change

手势

主题	描述	参考
拖拽	带约束和控制的拖拽手势	gestures-drag
平移	用于触摸和指针事件的平移手势	gestures-pan
点按与按压	点按和按压缩放手势处理程序	gestures-tap-press
悬停与聚焦	悬停和聚焦状态动画	gestures-hover-focus

布局动画

主题	描述	参考
AnimatePresence	为组件的进入和退出添加动画	layout-animate-presence
usePresence / useIsPresent	在 AnimatePresence 子组件中访问存在状态	layout-use-presence
usePresenceData	在后代组件中读取 AnimatePresence 的自定义 prop	layout-presence-data
LayoutGroup	跨组件协调布局动画	layout-group
Layout Animations	使用 layoutId 实现自动布局动画	layout-animations
Reorder	配合布局动画进行拖拽排序	layout-reorder
useInstantLayoutTransition	阻止布局更新一帧	layout-instant-transition
useResetProjection	在结构变更后重置布局投影树	layout-reset-projection

功能

主题	描述	参考
In View	用于视口/可见性检测的 useInView、inView()、usePageInView	features-in-view
Resize	用于窗口或元素尺寸的 resize() 观察器	features-resize
Optimized Appear	对 SSR 友好、带交接的入场动画	features-optimized-appear
SVG Path	用于路径动画的 pathLength、pathOffset、pathSpacing	features-svg-path
motion/client	Next.js 的 "use client" 与可 tree-shaking 的组件	features-react-client

工具

主题	描述	参考
useReducedMotion	用于减少动画偏好的 Hook	utils-reduced-motion
useAnimationFrame	与帧同步、使用 Motion 循环的回调	utils-animation-frame
useCycle	在一组状态之间循环切换	utils-cycle
useMotionValueEvent	订阅 motion value 事件	utils-motion-value-event
delay	与帧同步的延迟执行	utils-delay
interpolate	将输入范围映射到输出	utils-interpolate
useDomEvent	绑定 DOM 事件监听器	utils-dom-event
useInstantTransition	在更新期间阻止布局动画	utils-instant-transition
calcLength / createBox / distance	投影几何与距离	utils-path-geometry

进阶

主题	描述	参考
Animation Controls	使用 useAnimation 以编程方式控制动画	advanced-animation-controls
useAnimate	命令式动画 API	advanced-use-animate
LazyMotion	代码分割动画以提升性能	advanced-lazy-motion
MotionConfig	全局配置与减少动画	advanced-motion-config
Scroll Animations	滚动联动动画与视差效果	advanced-scroll-animations
transformTemplate	自定义 transform 输出	advanced-transform-template
addScaleCorrector	布局投影缩放校正器	advanced-scale-corrector

最佳实践

主题	描述	参考
打包体积	入口点与优化策略	best-practices-bundle