紅魔電競(jìng)平板評(píng)測(cè)：大屏幕硬實(shí)力
前言：三年的疫情因?yàn)橐暇W(wǎng)課的原因激活了平板市場(chǎng)，如今網(wǎng)課的時(shí)代已經(jīng)過去，大家的生活都恢復(fù)到了正軌，這也就意味著，真正考驗(yàn)平板電腦生存的環(huán)境來了。也就是面對(duì)著這種殘酷的
前幾天在網(wǎng)上看到了一個(gè)很有趣的動(dòng)畫效果，如下，光會(huì)跟隨鼠標(biāo)在卡片上進(jìn)行移動(dòng)，并且卡片會(huì)有視差的效果，那么在 React 中應(yīng)該如何去實(shí)現(xiàn)這個(gè)效果呢？
其實(shí)實(shí)現(xiàn)思路很簡(jiǎn)單，無非就是分幾步：
我們先在 Index.tsx 中準(zhǔn)備一個(gè)卡片頁面，光的CSS效果可以使用filter: blur() 來實(shí)現(xiàn)：
卡片的視差效果需要用到樣式中 transform 樣式，主要是配置四個(gè)東西：
上面只是給一個(gè)卡片增加光源，接下來可以給每一個(gè)卡片都增加光源啦?。?！
上面的代碼，總感覺這個(gè) hooks 耦合度太高不太通用，所以我們可以讓光源變成可配置化，這樣每個(gè)卡片就可以展示不同大小、顏色的光源了~像下面一樣：
既然是配置化，那我們希望是這么去使用 hooks 的，我們并不需要自己在頁面中去寫光源的dom節(jié)點(diǎn)，也不需要自己去寫光源的樣式，而是通過配置傳入 hooks 中：
所以 hooks 內(nèi)部要自己通過操作 DOM 的方式，去添加、刪除光源，可以使用createElement、appendChild、removeChild 去做這些事~
// use-light-card.tsimport { useEffect, useRef } from 'react';interface IOptions { light?: { width?: number; // 寬 height?: number; // 高 color?: string; // 顏色 blur?: number; // filter: blur() };}export const useLightCard = (option: IOptions = {}) => { // 獲取卡片的dom節(jié)點(diǎn) const cardRef = useRef<HTMLDivElement | null>(null); let cardOverflow = ''; // 光的dom節(jié)點(diǎn) const lightRef = useRef<HTMLDivElement>(document.createElement('div')); // 設(shè)置光源的樣式 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)`; }; // 設(shè)置卡片的 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); } }; // 監(jiān)聽卡片的鼠標(biāo)移入 const onMouseEnter = () => { // 添加光源 addLight(); setCardOverflowHidden(); }; // use-light-card.ts // 監(jiān)聽卡片的鼠標(biāo)移動(dòng) const onMouseMove = (e: MouseEvent) => { // 獲取鼠標(biāo)的坐標(biāo) const { clientX, clientY } = e; // 讓光跟隨鼠標(biāo) const cardDom = cardRef.current; const lightDom = lightRef.current; if (cardDom) { // 獲取卡片相對(duì)于窗口的x和y坐標(biāo) 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`; // 設(shè)置動(dòng)畫效果 const maxXRotation = 10; // X 軸旋轉(zhuǎn)角度 const maxYRotation = 10; // Y 軸旋轉(zhuǎn)角度 const rangeX = 200 / 2; // X 軸旋轉(zhuǎn)的范圍 const rangeY = 200 / 2; // Y 軸旋轉(zhuǎn)的范圍 const rotateX = ((clientX - x - rangeY) / rangeY) * maxXRotation; // 根據(jù)鼠標(biāo)在 Y 軸上的位置計(jì)算繞 X 軸的旋轉(zhuǎn)角度 const rotateY = -1 * ((clientY - y - rangeX) / rangeX) * maxYRotation; // 根據(jù)鼠標(biāo)在 X 軸上的位置計(jì)算繞 Y 軸的旋轉(zhuǎn)角度 cardDom.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; //設(shè)置 3D 透視 } }; // 監(jiān)聽卡片鼠標(biāo)移出 const onMouseLeave = () => { // 鼠標(biāo)離開移出光源 removeLight(); restoreCardOverflow(); }; useEffect(() => { // 設(shè)置光源樣式 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.tsximport './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; // } }}
本文鏈接：http://www.tebozhan.com/showinfo-26-92131-0.html使用 React Hooks 實(shí)現(xiàn)鼠標(biāo)懸浮卡片發(fā)光的動(dòng)畫效果
聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com
Copyright ? 2016-2023 天津谷騏科技有限公司 版權(quán)所有 sitemap.xml
違法及侵權(quán)請(qǐng)聯(lián)系：2376512515@qq.com 津ICP備18001702號(hào)
津公網(wǎng)安備 12010102000574號(hào)