如何使用 Framer Motion 和 React 创建粘性搜索交互
I’ve been eager to create something with the Gooey effect for a while. While many of our peers on X have been experimenting with it, I wanted to apply it to a more practical component. Recently, I stumbled upon a video showcasing dynamic island animations, which sparked my inspiration. Inspired by this, I decided to create a search bar—a small yet enjoyable interaction.
我一直渴望用 Gooey 效果 创建一些东西。虽然我们在 X 上的许多同行都在尝试它，但我想将其应用于一个更实用的组件。最近，我偶然发现了一个展示动态岛动画的 视频，这激发了我的灵感。受到这个启发，我决定创建一个搜索栏——一个小而有趣的交互。
First, we create the component for the Gooey effect from Lucas Bebber. I achieved the effect I wanted by changing the alpha channel data in the values matrix.
首先，我们创建来自Lucas Bebber的粘稠效果组件。我通过更改值矩阵中的alpha通道数据实现了我想要的效果。
const GooeyFilter = () => { return ( <svg aria-hidden="true"> <defs> <filter id="goo-effect"> <feGaussianBlur in="SourceGraphic" stdDeviation="5" result="blur" /> <feColorMatrix in="blur" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 18 -15" result="goo" /> <feComposite in="SourceGraphic" in2="goo" operator="atop" /> </filter> </defs> </svg> );
}; export default GooeyFilter;
(Default and custom values)
(默认值和自定义值)
After creating the filter effect in our main component, we apply this SVG filter to the parent element through CSS.
在我们的主组件中创建滤镜效果后，我们通过CSS将此SVG滤镜应用于父元素。
<div className="wrapper"> <GooeyFilter />
</div>
Up to this point, the process has been straightforward. Now, let’s add the crucial finishing touches with Framer Motion. With the SVG filter now active, it’s ready to be applied to our moving elements, bringing the gooey effect to life.
到目前为止，过程一直很简单。现在，让我们通过Framer Motion添加关键的最后润色。随着SVG滤镜的激活，它准备应用于我们的移动元素，使粘稠效果栩栩如生。
We will use four different states to manage the search bar:
我们将使用四种不同的状态来管理搜索栏：
const [state, setState] = useState({ step: 1, searchData: [], searchText: "", isLoading: false, });
The code employs a nested structure of AnimatePresence components. The outer layer manages the collective display of all results, while the inner layer handles the individual animation of each search re...