- 综合排序
- 最热优先
- 最新优先
- 来自专栏前端大合集
Framer 使用滚动变体创建动画
具体步骤: 第一步: 我们创建一个组件, 引入3个图标(Framer内置了,可以在import里面找到). 第二步: 引入到页面上,使用固定定位,定位在指定位置. 下面就该DEMO 的 原模版文件地址: framer.com/projects/HS… 在线体验地址: azure-screen-064672.framer.app/
2.1K10编辑于 2024-07-29 - 来自专栏前端大合集
Framer 滚动动画效果集合 (讲解)
但是我们今天不是讲如何使用代码来实现,而是讲一下在Framer 里面如何实现. 且非常容易就可以实现酷炫的滚动动画效果, 给网站添加丰富的视觉和交互体验. 下面是上面练习的源文件: framer.com/projects/Ez… 这个是网站: intelligent-rectangle-488580.framer.app/
89210编辑于 2024-07-29 - 来自专栏前端大合集
Framer快速搭建滚动动画网站(无代码)
前提 先介绍一下spline 和 Framer 是什么吧 spline: 是一款免费(大部分功能)的 3D 设计软件，具有实时协作功能，可在浏览器中创建 Web 交互体验。 Framer: 是一种无代码工具，可让您在不编写任何代码的情况下创建交互式、响应迅速且视觉上令人惊叹的网站。可视化界面和直观的控件使设计师可以轻松地将他们的想法变为现实。 (framer 需要挂T) spline framer 还有一点就是值得提的是, framer 可以直接将做好的原型图,一键发布网站,提供访问. 效果 地址: warm-building-723771.framer.app/ 学习 导航栏 Framer 已经内置了nav组件. 可以在此提供的组件,然后进行自定义. 当然也可以自己搭建一个组件. 效果可以打开这个网站看到 https://warm-building-723771.framer.app/.
74610编辑于 2024-07-29 - 来自专栏Java项目实战
Framer AI 零代码 生成式AI
Framer AI 零代码 生成式AIhttps://www.framer.com/更快的设计网站在熟悉的自由格式画布上设计您的网站。 使用Framer AI，你只需输入文本描述（支持中文），即可自动生成网站的设计、排版以及代码生成等工作。 此外，Framer AI还提供了动画效果、交互功能和CMS等特性，让你能够轻松创建专业、美观且高性能的网站。教程按照以下步骤快速使用教程：1. 进入Framer AI的主页。2. 你可以随时返回Framer AI的主页，查看和管理你已发布的网站，或创建新的网站。如果你在描述网站时遇到困难，你描述提示词让ChatGPT帮我们生成，让AI更懂AI。 同时，Framer AI也支持中文提示词，所以如果你使用的是中文描述，AI生成的内容也会是中文的。
1.7K50编辑于 2023-07-24 - 来自专栏前端大合集
Framer 一些交互相关的动画效果
前言 在Framer中，除了滑轮滚动交互动画之外，还有许多其他交互方式能够让你的设计生动活泼，提升用户体验。 在Framer中，你可以轻松创建平滑且自然的循环动画，让静态的设计元素动起来，增加视觉吸引力。 4. 鼠标拖拽（Drag and Drop）： 鼠标拖拽功能允许用户通过鼠标移动元素。 在Framer中，你可以定义元素的拖拽行为，例如设置拖拽的范围、拖拽时的视觉反馈以及拖拽结束后的动作。 为了更好地掌握这些交互动画，我将依次使用Framer制作不同交互的效果,进行讲解演示,方便大家更好的理解和掌握.
84810编辑于 2024-07-29 - 来自专栏程序那些事儿
Framer AI 功能让设计更高效！
Framer 作为一款新兴的设计和原型工具，也加入了 AI 功能，使其在市场上脱颖而出。 Framer 的 AI 功能可以根据用户提供的描述和设计元素，快速生成模板网页。 除了 AI 功能，Framer 还提供了许多其他功能，可以帮助设计师和开发人员创建高保真原型。Framer 的交互设计功能可以让设计师创建复杂的动画、手势和过渡效果，以模拟真实用户体验。 Framer 还支持使用真实数据和 API，可以让设计师更好地模拟用户与应用程序或网站的交互过程。 Framer 还提供了丰富的设计工具，如矢量编辑工具、文本编辑工具、图片和视频支持等，可以帮助设计师创建美观、高保真的设计。 除此之外，Framer 还具有灵活的工作流程和强大的集成能力。 无论是初学者还是专业设计师和开发人员，都可以通过 Framer 创建高保真的原型，实现真实的用户体验。
1.6K30编辑于 2023-07-24 - 来自专栏零域Blog
前端弹性动画与 framer-motion 动画库初探
其中 framer-motion 可以说是异军突起，发展非常迅猛 ! 接下来将一起探索一下 framer-motion 的使用方式。 framer-motion 什么是 framer-motion？ Proudly open source. framer motion 是一个生产级的 React 动画库，为他们自家原型工具产品 Framer 提供了支持，并自豪的进行了开源。 /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 - 来自专栏WordPress果酱
Framer：能够同时应用于桌面和移动设备的原型工具
Framer 简介 Framer 就是一个解决上面提到问题的基于浏览器的轻量级的开源原型框架，它让你只需要简单创建图像，动画，事件等模块来构建和测试复杂的交互。 Framer 使用 Webkit 技术，所以塔同时兼容桌面和移动布局，并且使用的时候只需要编辑 Framer 提供的 Javascirpt 函数。 使用 Framer 下载 Framer。 详细请参考 Framer 的网站，上面有详细的使用说明和例子。
1.7K20编辑于 2023-04-14 - 来自专栏小巫技术博客
高效Mac（三）面向程序员的交互设计神器：Framer Studio
软件名称：Framer studio 该软件为Mac平台的移动交互原型设计工具，该软件的出现为移动交互设计领域增添了又一款强有力的生产力工具，是由Framer.js建立，一个快速原型技术的开放源码框架。 Framer 允许您定义动画和交互作用，在移动设备上运行。
82330发布于 2018-07-20 - 来自专栏静Design
全新免费交互工具Framer Web到达战场,超好用！
静电说：说到Framer详细接触UI比较早的同学都有了解，但是之前的Framer上手并不是太容易，需要学习代码且上手难度高，因此不少设计师被劝退。 首先告知大家网址 https://www.framer.com/ 这是一款Web base工具，不需要客户端。 ↓↓一起来看看吧！ 通过Framer Web，我们可以完成非常多的交互效果，产品内置了多种预置的原型模板，切换效果非常平滑流畅。 这还不是全部，Framer支持加入gif动画，甚至MP4视频和声音。甚至可以调用Unsplash的图库填充。这样给了Framer Web更强大的功能和扩展性。 ? framer web和Framer不是一个工具哦。 ? 这么好用的Framer Web，静电忍不住要分享给大家了。
2.7K21发布于 2020-05-26 - 来自专栏终身学习者
这是一篇很好的互动式文章，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 怎么解决？
38810编辑于 2025-11-20 - 来自专栏魔术师卡颂
React动效，真的这么丝滑么
今天向大家推荐一个动效库 —— Framer motion。 怎么用？ Framer motion的核心API是motion的组件。每个HTML和SVG标签都有对应的motion组件。 </motion.div> Framer Motion检测到initial与animate中有value不同的key，对这些key执行过渡效果。 编排动画 Framer Motion的一个强大功能是：通过variants属性来编排不同组件的动效。 下面的代码通过variants属性实现上文mount时同样的效果。 </motion.div> ); 其他可选库 上文我们介绍了Framer motion的基本使用。除此以外，React Spring[1]也是React技术栈优秀的动效库。 通过他，可以更灵活的实现Framer Motion的所有效果。但是学习曲线很陡峭。 建议做复杂自定义动画时可以考虑（尤其是SVG和3D）。
2.2K10发布于 2020-12-29 - 来自专栏魔术师卡颂
能输出网页的AI应用来了，赶紧测评下
本文让我们来了解framer用AI生成网页的全流程。 什么是framer framer是一款网页可视化编辑器，诞生于2016年。 framer生成的页面 framer的工作流程 framer整体工作流程包括3步： 首先设计原型图，这一步可以通过两种途径实现： 设计师通过Figma设计 通过提示词描述，由AI生成 产出的原型图会进入编辑器界面 当然，瑕疵也是有的： 提示词中提到「轮播图」，framer中有现成的轮播图组件，却没有使用 提示词中提到「导航栏」，framer也没生成 相信在未来的迭代中，会进一步优化。 最后，一键部署网页（tank.framer.ai[2]）。整个设计、编辑、上线流程不到10分钟完成。 参考资料 [1] framer: https://framer.com/ [2] tank.framer.ai: https://tank.framer.ai/
2.3K30编辑于 2023-08-30 - 来自专栏腾讯社交用户体验设计
那些高效的界面设计工具
2 动效工具篇 2.1 Framer Web Framer Web是一款在线动效设计软件，于今年5月上线正式版，相比于Framer家族的前两款产品Framer classic、Framer X, Framer Framer Web的核心亮点是什么？ 1）网页端全平台可用 相比于Framer classic和Framer X作为本地客户端软件只支持Mac电脑，Framer Web是一款基于浏览器的在线设计工具，因此windows用户也可以安心使用。 同时Framer也新增了一些特别的交互控制实现一些特殊动效。 4）从设计到代码 代码一直是Framer的核心功能。Framer Web默认隐藏了代码面板，设计师还是可以在设定了动效后，通过点击顶部的handoff调出相应代码。
2K30发布于 2020-11-25 - 来自专栏大数据知识
最受欢迎的 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 具有更大的捆绑包大小，前端培训在受欢迎程度和星级方面不如 React Spring 受欢迎，但是它的文档更容易理解，值得您在下一个 React 项目中考虑。
2.4K30编辑于 2021-12-08 - 来自专栏云开发小程序1
python人工智能【隔空手势控制鼠标】“解放双手“
检测手部 得到手指关键点坐标 img = detector.findHands(img) cv2.rectangle(img, (frameR, frameR), (wCam - frameR , wCam - frameR), (0, wScr)) y3 = np.interp(y1, (frameR, hCam - frameR), (0, hScr)) clocX = plocX + ( 检测手部 得到手指关键点坐标 img = detector.findHands(img) cv2.rectangle(img, (frameR, frameR), (wCam - frameR 坐标转换： 将食指在窗口坐标转换为鼠标在桌面的坐标 # 鼠标坐标 x3 = np.interp(x1, (frameR, wCam - frameR), (0, wScr)) y3 = np.interp(y1, (frameR, hCam - frameR), (0, hScr)) # smoothening
1.3K40编辑于 2023-10-14 - 来自专栏前端社区
Mac全栈开发 - 交互设计
Framer 由 Google 出品的原型交互设计工具，瞧瞧它的Slogan --- “A little code goes a long way.” 没错！ 如果你是懂点开发的设计师，Framer 会是你的绝佳伴侣。 想象一下，你将 Sketch 中做出的视觉素材导入 Framer 并有机组合 ，然后通过少量代码立刻让他们 “动起来”，让后在提供的配套移动设备中展示给其他人，这是多酷的一件事情！
57630发布于 2019-03-21 - 来自专栏前端实验室
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 - 来自专栏雪碧君终将成长
交互设计工具的选择心得
QC之后，第二个接触的是Framer Studio 这是一款在官网售价 $ 79.99 的 需要一定编程基础的 实时可视化交互设计软件,前身是Framer.js，售价作为一款小软件，谈不上贵也不便宜。 最吸引我的点还是要数他的 PSD , Sketch 文件的导入功能，有一个需要注意的问题是，Framer的导入要求最小单位是 Group 也就是说无论你是个什么图形还是智能对象，想要被Framer导入进去 官网： framer.js 由于官网上的教程简单明了，整个软件的上手难度也比较低，虽然需要学习一些语言，而且还需要一定的手动写代码。 把PSD导入到Framer里面，最方便的地方在于我不需要去找元素的位置，程序默认会按照PSD的定位写好，这一点让我很愉快。 反过来，QC是需要每加一个模块都需要手动去调整数值，非常让人头大。 {framer.jpg} 总体而言，Framer算是一款比较不错的备选，如果没有门槛更低，操作更简单的软件，接下来就要好好学习和尝试一段时间了。
65840编辑于 2023-02-13
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号