使用 React Hooks 實現鼠標懸浮卡片發光的動畫效果

作者：林三心不學挖掘機 2024-06-04 14:17:26

開發

在網上看到了一個很有趣的動畫效果：光會跟隨鼠標在卡片上進行移動，并且卡片會有視差的效果。那么在 React 中應該如何去實現這個效果呢？

有趣的動畫效果

前幾天在網上看到了一個很有趣的動畫效果，如下，光會跟隨鼠標在卡片上進行移動，并且卡片會有視差的效果，那么在 React 中應該如何去實現這個效果呢？

基本實現思路

其實實現思路很簡單，無非就是分幾步：

首先，卡片是相對定位，光是絕對定位
監聽卡片的鼠標移入事件mouseenter，當鼠標進入時顯示光
監聽卡片的鼠標移動事件mouseover，鼠標移動時修改光的left、top，讓光跟隨鼠標移動
監聽卡片的鼠標移出事件mouseleave，鼠標移出時，隱藏光

我們先在 Index.tsx 中準備一個卡片頁面，光的CSS效果可以使用filter: blur() 來實現：

可以看到現在的效果是這樣：

實現光源跟隨鼠標

在實現之前我們需要注意幾點：

鼠標移入時需要設置卡片 overflow: hidden，否則光會溢出，而鼠標移出時記得還原
獲取鼠標坐標時需要用clientX/Y而不是pageX/Y，因為前者會把頁面滾動距離也算進去，比較嚴謹

剛剛說到實現思路時我們說到了mouseenter、mousemove、mouseleave，其實mouseenter、mouseleave 這二者的邏輯比較簡單，重點是 mouseover 這個監聽函數

而在 mouseover 這個函數中，最重要的邏輯就是：光怎么跟隨鼠標移動呢？

或者也可以這么說：怎么計算光相對于卡片盒子的 left 和 top

對此我專門畫了一張圖，相信大家一看就懂怎么算了：

left = clientX - x - width/2
height = clientY - y - height/2

知道了怎么計算，那么邏輯的實現也很明了了~封裝一個use-light-card.ts

接著在頁面中去使用：

這樣就能實現基本的效果啦~

卡片視差效果

卡片的視差效果需要用到樣式中 transform 樣式，主要是配置四個東西：

perspective：定義元素在 3D 變換時的透視效果
rotateX：X 軸旋轉角度
rotateY：Y 軸旋轉角度
scale3d：X/Y/Z 軸上的縮放比例

現在就有了卡片視差的效果啦~

給所有卡片添加光源

上面只是給一個卡片增加光源，接下來可以給每一個卡片都增加光源啦！！！

讓光源變成可配置

上面的代碼，總感覺這個 hooks 耦合度太高不太通用，所以我們可以讓光源變成可配置化，這樣每個卡片就可以展示不同大小、顏色的光源了~像下面一樣：

既然是配置化，那我們希望是這么去使用 hooks 的，我們并不需要自己在頁面中去寫光源的dom節點，也不需要自己去寫光源的樣式，而是通過配置傳入 hooks 中：

所以 hooks 內部要自己通過操作 DOM 的方式，去添加、刪除光源，可以使用createElement、appendChild、removeChild 去做這些事~

完整源碼

// use-light-card.ts

import { useEffect, useRef } from 'react';

interface IOptions {
  light?: {
    width?: number; // 寬
    height?: number; // 高
    color?: string; // 顏色
    blur?: number; // filter: blur()
  };
}

export const useLightCard = (option: IOptions = {}) => {
  // 獲取卡片的dom節點
  const cardRef = useRef<HTMLDivElement | null>(null);
  let cardOverflow = '';
  // 光的dom節點
  const lightRef = useRef<HTMLDivElement>(document.createElement('div'));
  // 設置光源的樣式

  const setLightStyle = () => {
    const { width = 60, height = 60, color = '#ff4132', blur = 40 } = option.light ?? {};
    const lightDom = lightRef.current;
    lightDom.style.position = 'absolute';
    lightDom.style.width = `${width}px`;
    lightDom.style.height = `${height}px`;
    lightDom.style.background = color;
    lightDom.style.filter = `blur(${blur}px)`;
  };

  // 設置卡片的 overflow 為 hidden
  const setCardOverflowHidden = () => {
    const cardDom = cardRef.current;
    if (cardDom) {
      cardOverflow = cardDom.style.overflow;
      cardDom.style.overflow = 'hidden';
    }
  };
  // 還原卡片的 overflow
  const restoreCardOverflow = () => {
    const cardDom = cardRef.current;
    if (cardDom) {
      cardDom.style.overflow = cardOverflow;
    }
  };

  // 往卡片添加光源
  const addLight = () => {
    const cardDom = cardRef.current;
    if (cardDom) {
      cardDom.appendChild(lightRef.current);
    }
  };
  // 刪除光源
  const removeLight = () => {
    const cardDom = cardRef.current;
    if (cardDom) {
      cardDom.removeChild(lightRef.current);
    }
  };

  // 監聽卡片的鼠標移入
  const onMouseEnter = () => {
    // 添加光源
    addLight();
    setCardOverflowHidden();
  };

  // use-light-card.ts

  // 監聽卡片的鼠標移動
  const onMouseMove = (e: MouseEvent) => {
    // 獲取鼠標的坐標
    const { clientX, clientY } = e;
    // 讓光跟隨鼠標
    const cardDom = cardRef.current;
    const lightDom = lightRef.current;
    if (cardDom) {
      // 獲取卡片相對于窗口的x和y坐標
      const { x, y } = cardDom.getBoundingClientRect();
      // 獲取光的寬高
      const { width, height } = lightDom.getBoundingClientRect();
      lightDom.style.left = `${clientX - x - width / 2}px`;
      lightDom.style.top = `${clientY - y - height / 2}px`;

      //   設置動畫效果
      const maxXRotation = 10; // X 軸旋轉角度
      const maxYRotation = 10; // Y 軸旋轉角度

      const rangeX = 200 / 2; // X 軸旋轉的范圍
      const rangeY = 200 / 2; // Y 軸旋轉的范圍

      const rotateX = ((clientX - x - rangeY) / rangeY) * maxXRotation; // 根據鼠標在 Y 軸上的位置計算繞 X 軸的旋轉角度
      const rotateY = -1 * ((clientY - y - rangeX) / rangeX) * maxYRotation; // 根據鼠標在 X 軸上的位置計算繞 Y 軸的旋轉角度

      cardDom.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; //設置 3D 透視
    }
  };
  // 監聽卡片鼠標移出
  const onMouseLeave = () => {
    // 鼠標離開移出光源
    removeLight();
    restoreCardOverflow();
  };

  useEffect(() => {
    // 設置光源樣式
    setLightStyle();
    // 綁定事件
    cardRef.current?.addEventListener('mouseenter', onMouseEnter);
    cardRef.current?.addEventListener('mousemove', onMouseMove);
    cardRef.current?.addEventListener('mouseleave', onMouseLeave);
    return () => {
        // 解綁事件
        cardRef.current?.removeEventListener('mouseenter', onMouseEnter);
        cardRef.current?.removeEventListener('mousemove', onMouseMove);
        cardRef.current?.removeEventListener('mouseleave', onMouseLeave);
    }
  })

  return {
    cardRef,
  };
};

// Index.tsx
import './Index.less'
import { useLightCard } from './use-light-card'

const Index = () => {
    const { cardRef: cardRef1 } = useLightCard()
    const { cardRef: cardRef2 } = useLightCard({
        light: {
            color: '#ffffff',
            width: 100
        }
    })
    const { cardRef: cardRef3 } = useLightCard({
        light: {
            color: 'yellow'
        }
    })

    return <div className='light-card-container'>
        {/* 方塊盒子 */}
        <div className='item' ref={cardRef1}></div>
        {/* 方塊盒子 */}
        <div className='item' ref={cardRef2}></div>
        {/* 方塊盒子 */}
        <div className='item' ref={cardRef3}></div>
    </div>
}

export default Index
// Index.less

.light-card-container {
    background: black;
    width: 100%;
    height: 100%;
    padding: 200px;
    display: flex;
    justify-content: space-between;
  
    .item {
      position: relative;
      width: 125px;
      height: 125px;
      background: #1c1c1f;
      border: 1px solid rgba(255, 255, 255, 0.1);

      // 不需要了
      // .light {
      //   width: 60px;
      //   height: 60px;
      //   background: #ff4132;
      //   filter: blur(40px);
      //   position: absolute;
      // }
    }
}

結語

責任編輯：趙寧寧來源：前端之神