fix:优化移动端打击效果

This commit is contained in:
Daniel
2026-03-06 14:01:47 +08:00
parent 9f86de0125
commit 3251de6406
2 changed files with 10 additions and 6 deletions

View File

@@ -253,20 +253,21 @@ export function WarMap() {
const toggleStrikeFilter = (key: LegendFilterKey | null) => { const toggleStrikeFilter = (key: LegendFilterKey | null) => {
const next = strikeLegendFilter === key ? null : key const next = strikeLegendFilter === key ? null : key
strikeLegendFilterRef.current = next strikeLegendFilterRef.current = next
// 点击时同步飞镜头,避免等 useEffect 造成的明显延迟;缓动曲线使动画更顺滑 // 点击时同步飞镜头;移动端减小 padding、缩短 duration使小屏更顺滑
if (next != null) { if (next != null) {
const bounds = getBoundsForFilterRef.current(next) const bounds = getBoundsForFilterRef.current(next)
const map = mapRef.current?.getMap() const map = mapRef.current?.getMap()
if (bounds && map) { if (bounds && map) {
const isMobile = typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches
map.fitBounds( map.fitBounds(
[ [
[bounds[0], bounds[1]], [bounds[0], bounds[1]],
[bounds[2], bounds[3]], [bounds[2], bounds[3]],
], ],
{ {
padding: 80, padding: isMobile ? 40 : 80,
maxZoom: 8, maxZoom: isMobile ? 7.5 : 8,
duration: 500, duration: isMobile ? 400 : 500,
easing: (t) => 1 - Math.pow(1 - t, 3), // easeOutCubic easing: (t) => 1 - Math.pow(1 - t, 3), // easeOutCubic
} }
) )
@@ -1101,12 +1102,15 @@ export function WarMap() {
return () => cancelAnimationFrame(animRef.current) return () => cancelAnimationFrame(animRef.current)
}, []) }, [])
// 主视角:容器尺寸变化时无动画;图例点「全部/实时」时平滑飞回 // 主视角:容器尺寸变化时无动画;图例点「全部/实时」时平滑飞回;移动端减小 padding、缩短 duration
const fitToTheater = useCallback((options?: { duration?: number }) => { const fitToTheater = useCallback((options?: { duration?: number }) => {
const map = mapRef.current?.getMap() const map = mapRef.current?.getMap()
if (!map) return if (!map) return
const duration = options?.duration ?? 0 const duration = options?.duration ?? 0
map.fitBounds(THEATER_BOUNDS, { padding: 32, maxZoom: 6, duration }) const isMobile = typeof window !== 'undefined' && window.matchMedia('(max-width: 640px)').matches
const padding = duration > 0 && isMobile ? 24 : 32
const flyDuration = duration > 0 && isMobile ? 400 : duration
map.fitBounds(THEATER_BOUNDS, { padding, maxZoom: 6, duration: flyDuration })
}, []) }, [])
useEffect(() => { useEffect(() => {