#优质博文 #svg #react #motion #动画 #css #demo #course

How to Create a Gooey Search Interaction with Framer Motion and React

AI 摘要：本文详细介绍了如何使用 Framer Motion 和 React 创建一个带有 Gooey 效果的搜索交互组件。作者受到动态岛动画的启发，将 Gooey 效果应用于搜索栏，打造了一个小型但有趣的交互体验。教程涵盖了 Gooey 效果的实现、SVG 滤镜的应用、Framer Motion 的集成、搜索状态管理、动画效果的优化以及针对 Safari 浏览器的兼容性处理，旨在激发开发者创意并提供实用指导。

1. Gooey 效果的创建：
• 介绍了 Gooey 效果的起源，基于 Lucas Bebber 的文章 The Gooey Effect。
• 通过调整 SVG 滤镜中颜色矩阵的 alpha 通道值，实现自定义的 Gooey 效果。
• 提供了具体的代码示例，展示了如何使用 feGaussianBlur 和 feColorMatrix 创建滤镜效果。

2. 应用 Gooey 效果：
• 在主组件中通过 CSS 将 SVG 滤镜应用到父元素上。
• 提供了简单的代码结构，展示滤镜如何与 DOM 元素结合。

3. Framer Motion 集成：
• 使用 Framer Motion 为搜索栏添加动态动画效果，定义了四种状态（初始状态、搜索激活、搜索结果、加载中）来管理交互逻辑。
• 使用 AnimatePresence 组件实现搜索结果的集体展示和个体动画效果。
• 详细解释了 getResultItemVariants 和 getResultItemTransition 函数，用于控制搜索结果项的动画效果（如缩放、位移、模糊效果）。
• 动画设计注重细节，例如通过索引计算延迟实现顺序动画，并使用弹簧动画（spring）增加流畅性。

4. Safari 兼容性挑战：
• 提到 WebKit 对 SVG 滤镜的限制，作者通过 isUnsupported 布尔值对 Safari 浏览器进行了动画调整。
• 强调了兼容性问题的长期存在，并提供了针对性的解决方案。

author Oguzhan Tufenk

#优质博文 #动画 #前端 #css #react #motion #svg #demo
喜欢这个～
Building an Infinite Marquee Along an SVG Path with React & Motion | CodeSandbox

AI 摘要：本文详细介绍如何使用 React、TypeScript 和 Motion（原 Framer Motion）库创建一个沿着自定义 SVG 路径无限滚动的跑马灯效果。作者从基础的 SVG 路径创建开始，逐步讲解如何通过 CSS 属性 offset-path 和 offset-distance 实现路径跟随动画，并利用 Motion 库增强动画控制和交互性。文章涵盖了多元素动画、悬停和滚动速度控制、Z 轴顺序管理、CSS 属性映射以及响应式设计等高级技术，旨在帮助开发者构建复杂而流畅的网页动画效果。

author Daniel Petho

#优质博文 #前端 #动画 #motion #css #动画 #交互设计
不得不说真棒啊，给了我好多灵感和小点子~能把自己做的什么讲的明明白白好厉害。

A Million Little Secrets 一百万个小秘密

AI 摘要：本文详细拆解了Josh W. Comeau为其动画课程设计的登录页面的技术实现。该页面看似简洁，但包含 14,000+ 行代码和 200+ 文件，通过多个交互工具（如“Chaos Toolbar”）和动态效果（如粒子、爆炸、魔法棒变换）展示前端动画技术。
核心内容包括：
1. SVG动画 ：通过分组（ <g> 标签）与 transform-origin 控制图标动画（如炸弹旋转、橡皮擦路径分离）。
2. 粒子系统 ：利用极坐标系生成随机方向粒子，结合 CSS 三角函数与动画延迟实现自然效果。
3. 雪碧图优化 ：将 22 个 3D 形状合并为单图，通过 object-position 定位，减少加载闪烁与带宽消耗。
4. 音效设计 ：使用多采样、按键反馈音效与自定义录音增强交互真实感，并开源 React Hook 库 use-sound 。
5. Canvas 烟花：基于极坐标和物理模拟实现庆祝效果，强调“新颖性”对动画趣味性的重要性。
此外，作者分享了开发中的取舍（如舍弃糖果主题素材）、性能优化策略（如 5 秒加载超时控制）及未来计划（如 prefers-reduced-data 适配）。

via Josh W Comeau

Joshwcomeau

A Million Little Secrets • Josh W. Comeau

I spent the past few weeks packing as many easter eggs as I could into my latest project, and in this blog post, I want to dig into some of the more interesting details! If you’re interested in animations/interactions, you’ll want to check this one out; I…

#工具推荐 #前端 #组件库 #tailwind #react #nextjs #motion #落地页 #tools #动画

昨天群里看到的，相当漂亮的落地页酷炫组件库，且适用我的技术栈，加入知识库方便检索。

Aceternity UI 是一个前端UI组件库，专为快速构建美观网站而设计。用户可以通过复制粘贴组件代码，轻松集成到项目中，无需担心样式或动画。由 Next.js、React、TailwindCSS 和 Framer Motion，提供丰富的模板和组件，帮助开发者迅速提升网站外观和功能。

https://ui.aceternity.com/