PixiJS Viewport回弹框回弹后未居中问题求助

回弹到屏幕左上角 #

默认的bounce行为是限制viewport不超出bounceBox，但如果要强制回弹到左上角，直接监听回弹结束事件重置位置即可：

// 初始化回弹配置
viewport.bounce({
  friction: .1,
  bounceBox: new Rectangle(0, 0, window.innerWidth, window.innerHeight)
})

// 回弹结束时强制定位到左上角
viewport.on('bounce-end', () => {
  viewport.setPosition(0, 0)
})

如果你的场景内容本身从左上角起始，也可以调整bounceBox的边界，让viewport的可视区域始终被约束在左上角范围内，但监听事件的方式更直接可控。

回弹到屏幕中心 #

要让回弹后停在屏幕中心，需要先计算中心对应的viewport坐标，再在回弹结束时移动到该位置：

方式1：瞬间定位到中心 #

// 初始化回弹配置
viewport.bounce({
  friction: .1,
  bounceBox: new Rectangle(0, 0, window.innerWidth, window.innerHeight)
})

// 计算屏幕中心对应的viewport位置（假设场景内容原点在左上角）
const centerX = (window.innerWidth - viewport.worldWidth) / 2
const centerY = (window.innerHeight - viewport.worldHeight) / 2

// 回弹结束时定位到中心
viewport.on('bounce-end', () => {
  viewport.setPosition(centerX, centerY)
})

方式2：平滑过渡到中心 #

如果想要更自然的动画效果，可以用moveCenter方法实现平滑移动：

viewport.on('bounce-end', () => {
  // 第二个参数是动画时长（单位：毫秒）
  viewport.moveCenter(window.innerWidth / 2, window.innerHeight / 2, 500)
})

注意事项 #

• 确保viewport.worldWidth和viewport.worldHeight是你场景内容的实际尺寸，如果场景尺寸固定，可提前计算好中心位置避免重复计算。
• 如果bounceBox的设置和你的场景不匹配，可能会导致回弹逻辑混乱，需根据实际场景调整bounceBox的参数。

内容的提问来源于stack exchange，提问作者ThomasSTA