- 综合排序
- 最热优先
- 最新优先
- 来自专栏零域Blog
前端弹性动画与 framer-motion 动画库初探
| image.png framer-motion | image.png 其中 framer-motion 可以说是异军突起，发展非常迅猛 ! 接下来将一起探索一下 framer-motion 的使用方式。 framer-motion 什么是 framer-motion？ 先看下官网[https://www.framer.com/motion/](https://www.framer.com/motion/)的一段话 > A production-ready motion /framer-motion-practice](https://github.com/Gaohaoyang/framer-motion-practice) framer-motion 主要 api [https://www.framer.com/api/motion/](https://www.framer.com/api/motion/) !
4.7K30编辑于 2022-03-28 - 来自专栏终身学习者
这是一篇很好的互动式文章，Framer Motion 布局动画
重现framer的神奇布局动画的指南。 到目前为止，我最喜欢 Framer Motion 的部分是它神奇的布局动画--将 layout prop 拍在任何运动组件上，看着该组件从页面的一个部分无缝过渡到下一个部分。 FLIP：是Framer Motion使用的技术。 布局变化 当页面上的一个元素影响其他元素改变位置时，就会发生布局变化。 Framer Motion使用FLIP来实现其布局动画。 顾名思义，FLIP是一种四步技术，它通过颠倒浏览器所做的任何布局变化来工作。 这也是 Framer Motion使用的方法。
3.7K20编辑于 2023-01-06 - 来自专栏前端达人
React 动画真的难吗？我用一个库解决了困扰大半年的性能问题
为什么选择 Framer Motion？ Framer Motion 的核心优势不在于"能做什么"，而在于"怎么做"——它把动画声明式化了。 不是所有动画都需要 Framer Motion 但我得强调一点——这不是说 CSS 过时了。 使用场景划分应该是这样的： 场景 推荐方案 简单 hover、focus 反馈 CSS 就够 同时控制多个元素的串联动画 Framer Motion 响应用户手势（拖拽、滑动） Framer Motion 页面/模态框进出场动画 Framer Motion 复杂的基于滚动的动画 Framer Motion Framer Motion 真正的价值，在于简化复杂场景下的动画编排逻辑。 实战场景：我是怎么用它解决性能问题的 前面提到的"白屏闪烁"问题，用 Framer Motion 怎么解决？
38210编辑于 2025-11-20 - 来自专栏魔术师卡颂
React动效，真的这么丝滑么
今天向大家推荐一个动效库 —— Framer motion。 怎么用？ Framer motion的核心API是motion的组件。每个HTML和SVG标签都有对应的motion组件。 import { motion } from "framer-motion" <motion.div initial={{ opacity: 0, y: -50 }} animate={{ opacity </motion.div> Framer Motion检测到initial与animate中有value不同的key，对这些key执行过渡效果。 import { motion } from "framer-motion" <AnimatePresence> <motion.div exit={{ opacity: 0, y </motion.div> </AnimatePresence> 效果： ? 编排动画 Framer Motion的一个强大功能是：通过variants属性来编排不同组件的动效。
2.2K10发布于 2020-12-29 - 来自专栏大数据知识
最受欢迎的 5 个 React 动画库
Framer Motion Framer Motion 是一个流行的 React 动画库，可轻松创建动画。它拥有简化的 API，可以抽象出动画背后的复杂性，并允许开发人员轻松创建动画。 要安装 Framer Motion，请在终端上运行以下两个命令之一： npm install framer-motion Oryarn add framer-motion 接下来，添加以下代码块，以将简单的动画添加到 box 组件： import React from "react";import { motion } from "framer-motion";import ". 180 : 360 }} > Hello Framer motion </motion.div> );} 复制代码 与 react-spring 相似，Framer Motion 总体而言，Framer Motion 是一个非常强大，高度可定制且功能强大的库：motion.div 受欢迎程度：在 GitHub 上有 8.4k 颗星，在 NPM 上每周有 292,291 次以上的下载
2.4K30编辑于 2021-12-08 - 来自专栏Next.js 实战系列
Next.js 实战 (五)：添加路由 Transition 过渡效果和 Loading 动画
什么是 Framer Motion Framer Motion 是一个专门为 React 设计的、功能强大且易于使用的动画库。 Framer Motion 提供了声明式的 API 来处理动画、手势以及页面转换，非常适合用来创建响应式用户界面。 } from "framer-motion"; export default function Template({ children }: { children: React.ReactNode } from "framer-motion"; import { LayoutRouterContext } from "next/dist/shared/lib/app-router-context.shared-runtime （使用 Framer Motion）
1.2K10编辑于 2025-08-18 - 来自专栏CRPER折腾记
Next.js 14 App Router引入 farmer-motion 初始化异常解决，顺带学点知识
// SlideLeftTransitionWrapper.tsx import { motion } from "framer-motion"; export default function Transition 首先 farmer-motion 这个 npm 库，翻源码便可以看到大量能力的实现是依赖浏览器客户端 API 特性； github.com/framer/moti… 其次上面说到了 App Router react.dev/reference/r… react.dev/reference/r… 修正执行 代码修正 "use client"; import { motion } from "framer-motion > ); } 还能再抽象一点，比如我们取个名字， MotionElement.tsx "use client" import { motion } from "framer-motion"; export （farmer-motion）： Farmer-motion: transition Farmer-motion: component
83210编辑于 2024-04-19 - 来自专栏前端实验室
34K Star 的UI库，超神了！
安装 # with Yarn $ yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 # with npm $ npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 # with pnpm $ pnpm add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 # with Bun $ bun add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^6 2.导入模块 import { ChakraProvider
1.2K30编辑于 2023-09-20 - 来自专栏Web前端
React 进度条组件 ProgressBar 详解
解决方案：使用 CSS 动画库如 framer-motion 或 react-spring 来实现更复杂的动画效果。 代码实现import React from 'react';import { motion } from 'framer-motion';import '. ProgressBar.css';const ProgressBar = ({ percent }) => { return (
<motion.div animate={{ width: `${percent}%` }} transition={{ duration: 0.5, ease: 'easeInOut' }} ></motion.div 扩展阅读React 官方文档：React 官方文档CSS 过渡和动画：MDN CSS 过渡Framer Motion：Framer Motion 文档React Spring：React Spring1.3K10编辑于 2024-12-13来自专栏前端食堂前端食堂技术周刊第 29 期：StackBlitz 加入字节码联盟、Safari 15.4、ESLint、可折叠设备布局
为双屏和可折叠设备构建 Web 布局 Tao of Node 关于 Framer Motion 布局的一切 antfu 分享了他的 VS Code 配置和扩展 如何使用 Three.js 和 React 关于 Framer Motion 布局的一切[12] 使用 Framer Motion 进行布局动画的交互式文章，文中有大量示例。 building-web-layouts-dual-screen-foldable-devices/ [11] Tao of Node: https://alexkondov.com/tao-of-node/ [12] 关于 Framer Motion 布局的一切: https://blog.maximeheckel.com/posts/framer-motion-layout-animations/ [13] antfu 分享了他的
1.3K10编辑于 2022-04-11来自专栏前端大合集Framer 使用滚动变体创建动画
具体步骤: 第一步: 我们创建一个组件, 引入3个图标(Framer内置了,可以在import里面找到). 第二步: 引入到页面上,使用固定定位,定位在指定位置. 下面就该DEMO 的 原模版文件地址: framer.com/projects/HS… 在线体验地址: azure-screen-064672.framer.app/
2K10编辑于 2024-07-29来自专栏前端大合集Framer 滚动动画效果集合 (讲解)
但是我们今天不是讲如何使用代码来实现,而是讲一下在Framer 里面如何实现. 且非常容易就可以实现酷炫的滚动动画效果, 给网站添加丰富的视觉和交互体验. 下面是上面练习的源文件: framer.com/projects/Ez… 这个是网站: intelligent-rectangle-488580.framer.app/
88010编辑于 2024-07-29来自专栏月亮与二进制《Motion Design for iOS》（八）
Clear中的捏交互 查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS 查看作者首页
75030发布于 2021-11-23来自专栏月亮与二进制《Motion Design for iOS》（六）
查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS 查看作者首页
50120发布于 2021-11-23来自专栏月亮与二进制《Motion Design for iOS》（十）
查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS 查看作者首页
60610发布于 2021-11-23来自专栏月亮与二进制《Motion Design for iOS》（十九）
查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS 查看作者首页
83320发布于 2021-11-23来自专栏月亮与二进制《Motion Design for iOS》（十四）
查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS 查看作者首页
1.4K10编辑于 2022-05-13来自专栏月亮与二进制《Motion Design for iOS》（一）
查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS 查看作者首页
62210发布于 2021-11-23来自专栏月亮与二进制《Motion Design for iOS》（五）
查看完整合集：https://github.com/Cloudox/Motion-Design-for-iOS 查看作者首页
71720发布于 2021-11-23来自专栏月亮与二进制《Motion Design for iOS》（四十）
很有弹性！我们已经谈论了很多关于如何用JNWSpringAnimation和Core Animation创建弹簧动画的内容，现在来看看Pop的方法。
66620发布于 2021-11-23
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号