100 lines
4.4 KiB
TypeScript
100 lines
4.4 KiB
TypeScript
import { useEffect, type RefObject } from 'react'
|
|
import { getAppearance, subscribeAppearance } from './appearance'
|
|
|
|
/** 指针在窗口里的位置带来的偏移上限（像素）：鼠标停在窗口边缘时背景偏这么多。 */
|
|
const POSITION_SHIFT = 30
|
|
/** 鼠标移动时额外的晃动上限（像素）：移得越快晃得越多，停下来就慢慢回到位置对应的偏移。两项加起来不能超过 display.css 里背景层向外多出来的边距（130px）。 */
|
|
const SWAY_MAX = 90
|
|
/** 背景最多偏移多少像素（要比 display.css 里背景层向外多出来的边距 130px 小，否则会露边；设置里把幅度调大时靠它兜底）。 */
|
|
const MAX_OFFSET = 125
|
|
/** 每移动 1 像素，晃动增加多少像素。 */
|
|
const SWAY_GAIN = 0.8
|
|
/** 晃动每一帧衰减到多少：越接近 1，晃得越久。 */
|
|
const SWAY_DECAY = 0.94
|
|
/** 每一帧追上目标的比例：越小越慢、拖拽感越强。 */
|
|
const EASE = 0.05
|
|
|
|
/**
|
|
* 背景跟着鼠标（或手指）移动，带一点拖拽的惯性：
|
|
* - 位置：指针在窗口里的位置对应一个小的偏移（最多 POSITION_SHIFT），背景每帧只追上一小段；
|
|
* - 晃动：鼠标移动的时候，移动的距离再叠加一份额外的偏移（移得越快越大，最多 SWAY_MAX），停下来之后逐渐衰减，所以移动时背景「晃」得更明显。
|
|
* 指针离开窗口，背景慢慢回到中间。直接改背景层自己的 transform（不经过 CSS 变量：变量会让整页的样式重新计算，卡片又多）；
|
|
* 追上并且晃动衰减完之后就停止动画帧，不空转。用户开了「减少动态效果」就什么都不做。
|
|
*/
|
|
export function useBackgroundParallax(layer: RefObject<HTMLElement | null>) {
|
|
useEffect(() => {
|
|
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return
|
|
const element = layer.current
|
|
if (!element) return
|
|
let baseX = 0
|
|
let baseY = 0
|
|
let swayX = 0
|
|
let swayY = 0
|
|
let x = 0
|
|
let y = 0
|
|
let lastX: number | null = null
|
|
let lastY: number | null = null
|
|
let frame = 0
|
|
|
|
const step = () => {
|
|
swayX *= SWAY_DECAY
|
|
swayY *= SWAY_DECAY
|
|
const targetX = baseX + swayX
|
|
const targetY = baseY + swayY
|
|
x += (targetX - x) * EASE
|
|
y += (targetY - y) * EASE
|
|
element.style.transform = `translate3d(${Math.max(-MAX_OFFSET, Math.min(MAX_OFFSET, x)).toFixed(2)}px, ${Math.max(-MAX_OFFSET, Math.min(MAX_OFFSET, y)).toFixed(2)}px, 0)`
|
|
const moving = Math.abs(targetX - x) > 0.05 || Math.abs(targetY - y) > 0.05 || Math.abs(swayX) > 0.05 || Math.abs(swayY) > 0.05
|
|
frame = moving ? requestAnimationFrame(step) : 0
|
|
}
|
|
const schedule = () => {
|
|
if (!frame) frame = requestAnimationFrame(step)
|
|
}
|
|
const clamp = (value: number) => Math.max(-SWAY_MAX, Math.min(SWAY_MAX, value))
|
|
const move = (event: PointerEvent) => {
|
|
// 位置：指针在窗口里的位置换成 -1 到 1（背景朝同一个方向偏移，想要反方向就把符号取反）
|
|
const amount = swayAmount()
|
|
baseX = ((event.clientX / window.innerWidth) * 2 - 1) * POSITION_SHIFT * amount
|
|
baseY = ((event.clientY / window.innerHeight) * 2 - 1) * POSITION_SHIFT * amount
|
|
// 晃动：这一次移动了多远，就再推背景一把
|
|
if (lastX !== null && lastY !== null) {
|
|
swayX = clamp(swayX + (event.clientX - lastX) * SWAY_GAIN * amount)
|
|
swayY = clamp(swayY + (event.clientY - lastY) * SWAY_GAIN * amount)
|
|
}
|
|
lastX = event.clientX
|
|
lastY = event.clientY
|
|
schedule()
|
|
}
|
|
// 晃动的幅度：总开关关了就是 0
|
|
const swayAmount = () => {
|
|
const { sway, parallax } = getAppearance()
|
|
return sway ? parallax : 0
|
|
}
|
|
const leave = () => {
|
|
baseX = 0
|
|
baseY = 0
|
|
lastX = null
|
|
lastY = null
|
|
schedule()
|
|
}
|
|
|
|
window.addEventListener('pointermove', move, { passive: true })
|
|
document.documentElement.addEventListener('mouseleave', leave)
|
|
// 设置里把晃动关了：背景慢慢回到中间，不用等下一次鼠标移动
|
|
const unsubscribe = subscribeAppearance(() => {
|
|
if (swayAmount() === 0) {
|
|
swayX = 0
|
|
swayY = 0
|
|
leave()
|
|
}
|
|
})
|
|
return () => {
|
|
unsubscribe()
|
|
window.removeEventListener('pointermove', move)
|
|
document.documentElement.removeEventListener('mouseleave', leave)
|
|
cancelAnimationFrame(frame)
|
|
element.style.transform = ''
|
|
}
|
|
}, [layer])
|
|
}
|