Repolode
提交项目
motiondivision

motiondivision/motion

一个用于 JavaScript、React 和 Vue 的开源动画库，支持弹簧动画、手势、布局过渡等。

在 GitHub 查看官网
Star
34,961
Fork
1,520
未关闭 Issue
16
最近提交
17小时前

这是什么？

Motion 是一个面向 JavaScript 的动画库，分别提供 React 和 Vue 版本。React 版通过 motion/react 引入，核心 JavaScript 包则提供 animate 函数，接收选择器或元素以及目标属性值即可产生动画。

库内将 JavaScript 的逻辑控制与浏览器原生 API 结合，使动画可以利用 GPU 加速运行。内置手势、弹簧物理、布局过渡、滚动联动效果和时间线等能力。项目使用 TypeScript 编写，支持 tree-shaking，并附有 450 多个官方示例和大量教程。

该项目此前以 Framer Motion 名称发布，React 用户需要将导入路径从 framer-motion 改为 motion/react。付费版 Motion+ 提供高级 API、过渡编辑器和更多示例。

核心功能

  • 01提供 React 组件化写法和原生 JavaScript 的 animate 函数。
  • 02支持弹簧物理、手势和布局过渡。
  • 03支持滚动联动效果和时间线编排。
  • 04通过 motion-v 包支持 Vue。
  • 05基于 TypeScript，构建产物支持 tree-shaking。

适用场景

  • 为 React 组件界面添加入场、退场和悬停动画。
  • 为布局中位置或尺寸发生变化的元素添加过渡效果。
  • 在营销页或落地页上实现滚动驱动的视觉效果。
  • 在 Vue 应用中无需编写底层动画代码即可加入动效。

快速上手

  1. 1

    安装 React 或 JavaScript 版 Motion

    npm install motion
  2. 2

    安装 Vue 版 Motion

    npm install motion-v
  3. 3

    导入并使用 React 组件

使用前须知

  • Framer Motion 已更名为 Motion，旧的 framer-motion 导入需要改为 motion/react。

标签

#animation#react#javascript#vue#typescript#spring#gestures#frontend-animation#animation-js#motion

常见问题

motion 是什么？
一个用于 JavaScript、React 和 Vue 的开源动画库，支持弹簧动画、手势、布局过渡等。 Motion 是一个面向 JavaScript 的动画库，分别提供 React 和 Vue 版本。React 版通过 motion/react 引入，核心 JavaScript 包则提供 animate 函数，接收选择器或元素以及目标属性值即可产生动画。
motion 可以免费使用吗？用的什么许可证？
motion 以 MIT 许可证开源。用于商业产品前，请先确认许可证条款。
motion 还在维护吗？
活跃维护中。motion 最近一次提交是在 2026年11月6日。
motion 适合用来做什么？
为 React 组件界面添加入场、退场和悬停动画。 为布局中位置或尺寸发生变化的元素添加过渡效果。 在营销页或落地页上实现滚动驱动的视觉效果。 在 Vue 应用中无需编写底层动画代码即可加入动效。
motion 怎么安装和运行？
安装 React 或 JavaScript 版 Motion: npm install motion 安装 Vue 版 Motion: npm install motion-v 导入并使用 React 组件
在哪里获取 motion？
源代码和安装说明在 GitHub 上：https://github.com/motiondivision/motion

概要由 AI 根据项目 README 生成；GitHub 数据每日更新。

相关项目