React-鼠标移动尾效的优化与学习

做鼠标移动尾效需要注意，因为尾效要占用全屏，所以当前图层不是鼠标要点击的目标，而是当前图层的下一个图层才是鼠标的点击目标,使用pointer-events

pointer-events

定义：

• 指针事件，指定在上面情况下某个DOM可以成为鼠标事件的target，即允许/禁止DOM的鼠标事件(click事件、hover事件、mouse的那个鼠标事件)

属性值：

• auto：默认值(使用这个跟不使用该属性一样)，在svg内容中相当于visiblePainted
• none：💚鼠标不在监听当前层，而是监听下一层中的元素穿透图层点击的关键。当然当前层的子元素中有设置该属性的其它值，还是会监听这个子元素的。
• visiblePainted | visibleFill | visibleStroke | visible painted | fill | stroke | all: 只使用于SVG，不介绍

用法：

• 穿透图层，父元素中使用，其它的都随意。

鼠标默认样式换成自定义图案

• 使用cursor来更换
• 路径放在asset下，图片要换成ico后缀，大小32x32
• 示例

  const iconUrl = '/asset/image/cursor/xxx.ico'
  
  <div
  	style={{ background: `${bg}`, cursor: `url(${iconUrl}),auto` }}
  >
  示例
  </div>

鼠标跟宠 — 纯纯的react，有点繁琐

思路解析

• 第一拿到跟宠的图片的dom， 使用useRef
• 第二给图片的left和top设置为动态变量
• 第三获取全局鼠标的clientX， clientY
• 第四设置图片的left和top， 鼠标偏移量减去图片的偏移量，减去图片的一般大小，然后除以图片的大小，最后加上原来的图片left或top
• 第五让鼠标不管移动到哪里，图片也要跟随到哪里 ,这要到全局的鼠标事件中处理，以上逻辑都是
• 第六设置图片的移动速度，和到达鼠标后停止

示例

const imgRef = useRef(null)
const [mouseHDirector, setMouseHDirector] = useState(false) // 鼠标滑动方向为右边，则为true
const img = mouseHDirector ? "/asset/image/bjyxback.png" : "/asset/image/bjyxfront.png"
const [imgl, setImgl] = useState(0) // 图片向左移动的距离
const [imgt, setImgt] = useState(0) // 图片向上移动的距离
const [currentMouseX, setCurrentMouseX] = useState(0)
const [currentMouseY, setCurrentMouseY] = useState(0)

window.addEventListener('mousemove', (e) => {
	setCurrentMouseX(e.clientX)
	setCurrentMouseY(e.clientY)
	setMouseHDirector(imgRef.current.offsetLeft < currentMouseX)
	setImgl((currentMouseX - imgRef.current.offsetLeft - imgRef.current.clientWidth/2)/50 + imgl)
	setImgt((currentMouseY - imgRef.current.offsetTop - imgRef.current.clientHeight/2)/50 + imgt)
})
return <Layout>
	<img 
		ref={imgRef} 
		alt="鼠标跟宠" 
		src={img} 
		className='absolute bg-cover z-50' 
		style={{ left: `${imgl}px`, top:`${imgt}px`, width: '60px', height: '60px' }} />
	{component}
	</Layout>

鼠标跟宠/拖尾效果 — 使用gsap动画库辅助，代码简洁明了

const spirtesList = [
	'h-10 w-10',
	'h-8 w-8',
	'h-6 w-6',
	'h-2 w-2',
	'h-6 w-6',
	'h-8 w-8',
	'h-10 w-10',
]
const [ismove, setIsmove] = useState(false)
useLayoutEffect(() => {
	window.addEventListener('mousemove', (e) => {
		setIsmove(!ismove)
		let sprite = gsap.utils.toArray('#sprite')
		const t1 = gsap.timeline()
		t1.to(sprite, {
			x: e.clientX,
			y: e.clientY,
			stagger: -1,
			duration: 5,
			opacity: 1,
			onComplete: () => {
				setIsmove(!ismove)
			},
		}).from(sprite, {
			x: e.clientX,
			y: e.clientY,
			stagger: -0.01,
			duration: 5,
			opacity: 0,
			onComplete: () => {
				setIsmove(!ismove)
			},
		})
	})
}, [])

return <div
	id='bea'
	className='absolute z-50 flex items-center pointer-events-none'
>
	{spirtesList.map((item, index) => (
		<div
			key={index}
			id='sprite'
			className={`${item} bg-2 rounded-full shadow-9`}
		/>
	))}
</div> 

拖尾：在单独的文件中写好，然后全局用，动画还是使用css的@keyframe

用JQuery实现会比较方便直接操作dom