这篇文章用来分享几个我在构建 jayzhushi.com 时用到的组件案例，它们分别是：

• Sound Button  - 按钮音效

• Magic Hover - 磁性悬浮

• Layout Switch - 布局切换

• Horizontal Scroll - 响应式水平滚动

• Back to top - 延迟回到顶部

• Page Transition - 页面过渡（已废弃）

访问 Demo 并获取项目文件：

访问 Demo ｜ Remix Link

Sound Button  - 按钮音效

这个案例展示为任意按钮添加悬浮或点击时播放声音的效果，除此之外，案例中还提供了一个开关来决定是否启用音效。

在 Overrider 中根据具体的使用情况来分配动作，每个条目对应的功能如下：

• Sound_Click：点击音效

• Sound_Hover：悬浮音效

• Sound_Hover_Click：悬浮与点击音效

• Switch_SoundoOff：开关的静音按钮

• Switch_SoundOn：开关的取消静音按钮

在 Code 的 Sound.tsx 文件中，编辑 sound 中的内容可修改音频文件。一般情况下，我们可以直接从音频网站获取下载链接拷贝于此，或将音频文件上传到 Github 或云端存储再获取资源链接。

Magic Hover - 磁性悬浮

这个指针悬停时的磁性效果一直以来都非常受欢迎，这段 Override 代码能够自动获取使用元素的尺寸并添加相关效果。

在 Override 文件 Effect - MagicHover 中，找到 offsetX 与 offsetY 所在行。其中， [-8, 8] 代表元素在鼠标悬浮时能够移动的范围是 8 像素（上下左右），修改这个值能够改变鼠标悬浮时元素的移动范围。

Layout Switch - 布局切换

在构建 jayzhushi.com 时，我特别喜欢横向滚动的概念。但为了使网站更具包容性，我提供了两种布局切换的解决方案。

在 Override 中，我将 Layout 用于网格内的元素，以保证它们在切换布局时有动画，Layout_Frame 用于网格本身。Layout_Viewport 用于网格的父级图层，它控制网格在从横向转变为纵向时，将网格从靠左转换为居中。最后，将 Layout_Toogle 用于控制网格变化的按钮。

另外，在使用这个 Override 文件时，我仍然可以利用 Framer 的 Layout 面板来调整属性（行和列属性不会生效）。在 Advanced 中，使用 Width 与 Height 来控制内容的尺寸。

如果你想要调整网格的列数，请修改 Layout.tsx 中的 Layout_Frame 组件。找到 grid 中的 gridTemplateColumns，修改 repeat( 后的数字即可。

Horizontal Scroll - 响应式水平滚动

这个案例允许我们仅使用鼠标滚轮来控制水平滚动布局，但这个效果仍然处于实验阶段。

在任何需要使用此效果的图层上添加 Override - Layout_Wheel_Control 即可，一般这个图层也会带有 Overflow: Scroll 的属性，而 Layout_Wheel_Toggle 则运用于开关此功能的组件。

需要注意的是，如果将这个案例与布局切换一起使用，那需要在切换到正常的垂直布局时停用此功能，否则可能会影响正常的滚动效果。

另外我想说的是，虽然在 Framer 中可以使用 Scroll Transform 来实现类似的效果（相当于使用滚轮来控制图层的 x 值），但这可能导致在触摸板或触摸屏设备上手指左右滑动无效，因此我选择使用 Overflow-X：Scroll 的方案，再针对滚轮进行优化。我的想法是能够提供一个响应式的交互方案，可以根据输入设备自动选择滚动的控制方式。在最新版本的 jayzhushi.com 中，在 Windows 上会默认启用这个方案。

Back to top  - 延迟回到顶部

这个案例提供了一个按钮组件，它能够在点击时将页面平滑地滚动到顶部，并且可以设置一个延迟时间以播放动画。案例提供了Code Component与Override版本，可按需使用。

如果组件是响应式的，那使用 Override（Effect-Toggle_BackTop）会是一个更好的选择。修改代码中 200 的数字为你想要的数字即可，单位为毫秒。

Page Transition - 页面过渡（已废弃）

最后一个案例是有关于页面过渡。我使用了旧版 Framer 的特征在跳转到其他页面之前添加了延迟时间，在这段时间内可以为元素添加一些退出动画。

在旧版的 Framer 中，Frame 在添加交互事件时能够添加延迟时间，但现在这项功能已经被废弃。将按钮或链接放在这个 Frame 中并添加延迟时间，接下来我们只需要添加一个在此时间内播放的动画化即可。

在 Override 中，我们将 Transition_Elements 运用到需要播放退出动画的元素中， Transition_Toggle 运用到链接或按钮上。 

在 Page_Transition.tsx 中，需要保证 setTimeout 中的延迟时间与链接跳转的时间接近（一般会久一点），这才能保证下个页面的元素正常显示（如果有用到退出动画）。

在我构建网站时，Framer 已经更新了页面过渡特性，因此我不建议再使用这个方式添加退出效果，因为这很繁琐且易导致错误。

最后

我在日常工作中常常研究许多概念效果，这些效果经过筛选后被我用于个人网站中。然而，这些效果的实现方式并不专业，可能导致你在使用以上案例时造成一些错误。如果你是一位 React 专家且有更好的实现方案，欢迎与我进一步沟通。