motion
Compare original and translation side by side
🇺🇸
Original
English🇨🇳
Translation
ChineseMotion is an open-source animation library for JavaScript, React, and Vue. It provides a simple API with first-class support for multiple platforms, a hybrid animation engine combining JavaScript with native browser APIs for 120fps GPU-accelerated animations, and production-ready features including TypeScript support, extensive test suite, tree-shakable builds, and a tiny footprint. Batteries included: gestures, springs, layout transitions, scroll-linked effects, and timelines.
The skill is based on Motion v12.29.2, generated at 2026-02-01.
Motion是一款适用于JavaScript、React和Vue的开源动画库。它提供简洁的API，对多平台提供一流支持，采用结合JavaScript与原生浏览器API的混合动画引擎，可实现120fps的GPU加速动画，同时具备生产就绪的特性，包括TypeScript支持、全面的测试套件、可摇树优化的构建以及极小的体积。内置功能丰富：手势、弹簧动画、布局过渡、滚动关联效果和时间轴。
本技能基于Motion v12.29.2，生成于2026-02-01。
Core References
核心参考
| Topic | Description | Reference |
|---|---|---|
| Motion Components | Basic motion components (motion.div, motion.svg, etc.) | core-components |
| Basic Animation | animate prop, initial, while states | core-animation |
| JavaScript animate() | Vanilla animate(), sequences, createScopedAnimate | core-javascript-animate |
| Vanilla scroll() | Imperative scroll() and scrollInfo() for non-React | core-vanilla-scroll |
| motionValue | Create MotionValues without React | core-vanilla-motion-value |
| stagger | Orchestrate child delays in variants | core-stagger |
| frame / cancelFrame | Motion's animation loop | core-frameloop |
| motion/mini | Minimal bundle entry | core-motion-mini |
| Variants | Declarative animation variants and orchestration | core-variants |
| Transitions | Animation timing, easing, spring physics | core-transitions |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 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即可创建MotionValues | core-vanilla-motion-value |
| stagger | 在变体中协调子元素的延迟动画 | core-stagger |
| frame / cancelFrame | Motion的动画循环 | core-frameloop |
| motion/mini | 极简包入口 | core-motion-mini |
| Variants | 声明式动画变体与编排 | core-variants |
| Transitions | 动画时序、缓动效果、弹簧物理特性 | core-transitions |
Motion Values
运动值
| Topic | Description | Reference |
|---|---|---|
| useMotionValue | Create and use motion values for reactive animations | values-motion-value |
| useSpring | Spring-based motion values with physics | values-spring |
| useTransform | Transform motion values with functions | values-transform |
| useMotionTemplate | Combine motion values into a string (e.g. filter, boxShadow) | values-motion-template |
| useFollowValue | Motion value that follows a source with any transition | values-follow |
| useScroll | Scroll-linked motion values and animations | values-scroll |
| useVelocity | Access velocity of motion values | values-velocity |
| useTime | Time-based motion values | values-time |
| useWillChange | GPU layer hint for animating elements | values-will-change |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| useMotionValue | 创建并使用运动值实现响应式动画 | values-motion-value |
| useSpring | 基于物理特性的弹簧运动值 | values-spring |
| useTransform | 通过函数转换运动值 | values-transform |
| useMotionTemplate | 将运动值组合为字符串（如filter、boxShadow） | values-motion-template |
| useFollowValue | 跟随源值的运动值，支持任意过渡效果 | values-follow |
| useScroll | 滚动关联的运动值与动画 | values-scroll |
| useVelocity | 获取运动值的速度 | values-velocity |
| useTime | 基于时间的运动值 | values-time |
| useWillChange | 为动画元素提供GPU层提示 | values-will-change |
Gestures
手势
| Topic | Description | Reference |
|---|---|---|
| Drag | Drag gestures with constraints and controls | gestures-drag |
| Pan | Pan gestures for touch and pointer events | gestures-pan |
| Tap & Press | Tap and press gesture handlers | gestures-tap-press |
| Hover & Focus | Hover and focus state animations | gestures-hover-focus |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Drag | 带约束与控制的拖拽手势 | gestures-drag |
| Pan | 适用于触摸与指针事件的平移手势 | gestures-pan |
| Tap & Press | 点击与长按手势处理器 | gestures-tap-press |
| Hover & Focus | 悬停与聚焦状态动画 | gestures-hover-focus |
Layout Animations
布局动画
| Topic | Description | Reference |
|---|---|---|
| AnimatePresence | Animate components entering and exiting | layout-animate-presence |
| usePresence / useIsPresent | Access presence state in AnimatePresence children | layout-use-presence |
| usePresenceData | Read AnimatePresence custom prop in descendants | layout-presence-data |
| LayoutGroup | Coordinate layout animations across components | layout-group |
| Layout Animations | Automatic layout animations with layoutId | layout-animations |
| Reorder | Drag-to-reorder with layout animations | layout-reorder |
| useInstantLayoutTransition | Block layout update for one frame | layout-instant-transition |
| useResetProjection | Reset layout projection tree after structural change | layout-reset-projection |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| AnimatePresence | 为组件的进入与退出添加动画 | layout-animate-presence |
| usePresence / useIsPresent | 在AnimatePresence子组件中获取存在状态 | layout-use-presence |
| usePresenceData | 在后代组件中读取AnimatePresence的自定义属性 | layout-presence-data |
| LayoutGroup | 跨组件协调布局动画 | layout-group |
| Layout Animations | 使用layoutId实现自动布局动画 | layout-animations |
| Reorder | 带布局动画的拖拽重排 | layout-reorder |
| useInstantLayoutTransition | 暂停一帧的布局更新 | layout-instant-transition |
| useResetProjection | 结构变化后重置布局投影树 | layout-reset-projection |
Features
功能特性
| Topic | Description | Reference |
|---|---|---|
| In View | useInView, inView(), usePageInView for viewport/visibility | features-in-view |
| Resize | resize() observer for window or element size | features-resize |
| Optimized Appear | SSR-friendly appear animations with handoff | features-optimized-appear |
| SVG Path | pathLength, pathOffset, pathSpacing for path animations | features-svg-path |
| motion/client | Next.js "use client" and tree-shakable components | features-react-client |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 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"与可摇树组件 | features-react-client |
Utils
工具函数
| Topic | Description | Reference |
|---|---|---|
| useReducedMotion | Hooks for reduced motion preference | utils-reduced-motion |
| useAnimationFrame | Frame-synced callback with Motion's loop | utils-animation-frame |
| useCycle | Cycle through a list of states | utils-cycle |
| useMotionValueEvent | Subscribe to motion value events | utils-motion-value-event |
| delay | Frame-synced delayed execution | utils-delay |
| interpolate | Map input range to output | utils-interpolate |
| useDomEvent | Attach DOM event listeners | utils-dom-event |
| useInstantTransition | Block layout animations during update | utils-instant-transition |
| calcLength / createBox / distance | Projection geometry and distance | utils-path-geometry |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| useReducedMotion | 适配减少动画偏好的钩子 | utils-reduced-motion |
| useAnimationFrame | 与Motion循环同步的帧回调 | utils-animation-frame |
| useCycle | 在一组状态间循环切换 | utils-cycle |
| useMotionValueEvent | 订阅运动值事件 | 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 |
Advanced
进阶内容
| Topic | Description | Reference |
|---|---|---|
| Animation Controls | Programmatic animation control with useAnimation | advanced-animation-controls |
| useAnimate | Imperative animation API | advanced-use-animate |
| LazyMotion | Code-split animations for better performance | advanced-lazy-motion |
| MotionConfig | Global configuration and reduced motion | advanced-motion-config |
| Scroll Animations | Scroll-linked animations and parallax effects | advanced-scroll-animations |
| transformTemplate | Custom transform output | advanced-transform-template |
| addScaleCorrector | Layout projection scale correctors | advanced-scale-corrector |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| 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 | 自定义转换输出 | advanced-transform-template |
| addScaleCorrector | 布局投影缩放校正器 | advanced-scale-corrector |
Best Practices
最佳实践
| Topic | Description | Reference |
|---|---|---|
| Bundle Size | Entry points and optimization strategies | best-practices-bundle |
| 主题 | 描述 | 参考链接 |
|---|---|---|
| Bundle Size | 入口点与优化策略 | best-practices-bundle |