#优质博文 #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