如何使用 GSAP 和 React 实现平滑的鼠标滚动作？

2024-03-13 13:06:27

平滑鼠标滚动作：借助 GSAP 在 React 中实现

引言

鼠标滚动动作是网站交互中的重要元素。它可以帮助用户流畅地浏览内容，提升用户体验。然而，实现平滑、响应式的鼠标滚动作可能是一个挑战，尤其是当您希望超越标准浏览器的滚动行为时。本文将介绍如何利用 GSAP 动画库，结合 React，实现生动、引人入胜的鼠标滚动作。

问题：非标准的鼠标滚动效果

许多网站希望提供独特的滚动体验，超出标准浏览器的限制。例如，某些网站可能希望实现类似 Plasticbcn.com 的滚动效果，该网站具有平滑、无缝的滚动，营造出身临其境的体验。实现这种效果需要超越基本的浏览器滚动功能。

解决方案：GSAP 和 React

解决此问题的方法是结合 React 和 GSAP（绿色袜子动画平台）。GSAP 是一个 JavaScript 动画库，以其强大的功能和跨平台兼容性而闻名。通过将鼠标滚动事件与 GSAP 动画关联起来，我们可以创建平滑、响应式的滚动体验，自定义到我们需要的任何程度。

技术实现

以下是实现平滑鼠标滚动作的步骤：

1. 设置滚动容器

使用 React 创建一个 div 作为滚动容器，并将其 ID 设置为“scroll-container”。此容器将容纳所有可滚动的内容。

2. 监听滚动事件

在 React 组件中监听滚动事件，并将滚动位置存储在状态中。这将使我们能够跟踪用户滚动的位置。

3. 更新滚动动画

使用 GSAP 来更新滚动动画，使其跟随鼠标滚动。创建一个动画循环来平滑更新动画，防止掉帧。

4. 调整容器大小

监听窗口大小变化事件，并相应调整滚动容器的高度。这将确保滚动容器始终与窗口大小相匹配。

5. 应用 3D 转换

为滚动容器应用 3D 转换，以启用 GPU 加速。这将提高滚动性能，提供更流畅的体验。

代码示例

import React, { useRef, useEffect, useState } from 'react';
import { TweenLite } from 'gsap';

const Scroller = () => {
  // 滚动状态
  const [scroller, setScroller] = useState({
    target: null,
    ease: 0.05,
    endY: 0,
    y: 0,
    resizeRequest: 1,
    scrollRequest: 0,
  });

  // 动画循环参考
  const requestRef = useRef(null);

  // 页面加载时初始化
  const onLoad = () => {
    // 更新滚动状态
    updateScroller();
    // 添加事件监听器
    window.addEventListener("resize", onResize);
    document.addEventListener("scroll", onScroll);
  };

  // 更新滚动动画
  const updateScroller = () => {
    // 获取窗口滚动位置
    const scrollY = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0;

    // 更新滚动状态
    setScroller(prevState => ({
      ...prevState,
      endY: scrollY,
      y: prevState.y + (scrollY - prevState.y) * prevState.ease,
    }));

    // 停止动画循环，当滚动位置稳定时
    if (Math.abs(scrollY - scroller.y) < 0.05) {
      setScroller(prevState => ({
        ...prevState,
        y: scrollY,
        scrollRequest: 0,
      }));
    }

    // 更新滚动容器的 y 值
    TweenLite.set(scroller.target, {
      y: -scroller.y,
    });

    // 如果需要，重新启动动画循环
    requestRef.current = scroller.scrollRequest > 0 ? requestAnimationFrame(updateScroller) : null;
  };

  // 监听滚动事件
  const onScroll = () => {
    // 触发滚动状态更新
    setScroller(prevState => ({
      ...prevState,
      scrollRequest: prevState.scrollRequest + 1,
    }));

    // 如果动画循环未运行，启动它
    if (!requestRef.current) {
      requestRef.current = requestAnimationFrame(updateScroller);
    }
  };

  // 监听窗口大小变化
  const onResize = () => {
    // 触发滚动状态更新
    setScroller(prevState => ({
      ...prevState,
      resizeRequest: prevState.resizeRequest + 1,
    }));

    // 如果动画循环未运行，启动它
    if (!requestRef.current) {
      requestRef.current = requestAnimationFrame(updateScroller);
    }
  };

  // 在组件挂载时设置滚动容器
  useEffect(() => {
    setScroller(prevState => ({
      ...prevState,
      target: document.querySelector("#scroll-container"),
    }));
  }, []);

  // 应用 3D 转换
  useEffect(() => {
    if (scroller.target) {
      TweenLite.set(scroller.target, {
        rotation: 0.01,
        force3D: true,
      });
    }
  }, [scroller.target]);

  // 清理
  useEffect(() => {
    window.addEventListener('load', onLoad);
    return () => {
      window.removeEventListener('load', onLoad);
      window.removeEventListener('resize', onResize);
      document.removeEventListener('scroll', onScroll);
      cancelAnimationFrame(requestRef.current);
    };
  }, []);

  return (
    <section className="viewport">
      <div id="scroll-container" className="scroll-container">
        <div className="content">
          ...
        </div>
      </div>
    </section>
  );
};

export default Scroller;