如何在macOS中为SKNode创建带弹性效果的水平滚动容器？

第一步：定义核心属性 #

在场景类中添加以下属性，用于跟踪滚动状态、边界及动量参数：

// 滚动容器节点
var scroller: SKNode!
// 鼠标按下时的偏移量
var scrollerOffsetX: CGFloat = 0
// 滚动速度（用于动量计算）
var scrollVelocity: CGFloat = 0
// 滚动边界：容器左边缘不超出可视区域的最小X值
var minScrollX: CGFloat = 0
// 滚动边界：容器右边缘不超出可视区域的最大X值
var maxScrollX: CGFloat = 0
// 动量摩擦系数（控制滑动衰减速度，值越小衰减越快）
let scrollFriction: CGFloat = 0.9
// 回弹弹性系数（控制边界回弹的幅度）
let bounceElasticity: CGFloat = 0.5

第二步：初始化滚动边界 #

在didMove(to view: SKView)方法中计算滚动容器的有效边界，确保容器滚动时始终有内容在可视范围内：

override func didMove(to view: SKView) {
    // 初始化滚动容器（替换为你的Scroller节点实例）
    scroller = Scroller()
    addChild(scroller)
    
    let visibleWidth = view.frame.width
    // 容器内容总宽度（根据实际子节点布局计算，这里直接取容器frame宽度为例）
    let contentWidth = scroller.frame.width
    
    // 计算边界：maxScrollX为容器左边缘对齐可视区域左边缘，minScrollX为容器右边缘对齐可视区域右边缘
    maxScrollX = 0
    minScrollX = visibleWidth - contentWidth
}

第三步：优化鼠标事件处理 #

替换原有鼠标事件方法，精准处理拖动逻辑与速度采集：

override func mouseDown(with event: NSEvent) {
    // 停止所有正在运行的滚动动作
    scroller.removeAllActions()
    // 重置滚动速度
    scrollVelocity = 0
    // 计算鼠标按下时，鼠标位置与容器原点的偏移量
    let mousePosInScene = event.location(in: self)
    scrollerOffsetX = scroller.position.x - mousePosInScene.x
}

override func mouseDragged(with event: NSEvent) {
    let mousePosInScene = event.location(in: self)
    // 计算拖动后的目标位置
    let targetX = mousePosInScene.x + scrollerOffsetX
    
    // 拖动时实时限制边界（避免过度超出）
    scroller.position.x = max(min(targetX, maxScrollX), minScrollX)
    
    // 记录拖动速度（乘以系数调整灵敏度）
    scrollVelocity = event.deltaX * 2
}

override func mouseUp(with event: NSEvent) {
    // 动量滚动逻辑交由update方法处理
}

第四步：添加Update方法处理动量滑动与边界回弹 #

在场景的update(_ currentTime: TimeInterval)方法中实现动量衰减与边界回弹的物理效果：

override func update(_ currentTime: TimeInterval) {
    guard abs(scrollVelocity) > 0.1 else { 
        scrollVelocity = 0
        return 
    }
    
    // 应用摩擦衰减速度
    scrollVelocity *= scrollFriction
    
    var targetX = scroller.position.x + scrollVelocity
    
    // 右边界回弹处理
    if targetX > maxScrollX {
        let overshoot = targetX - maxScrollX
        targetX = maxScrollX - overshoot * bounceElasticity
        scrollVelocity = -scrollVelocity * bounceElasticity
    } 
    // 左边界回弹处理
    else if targetX < minScrollX {
        let overshoot = minScrollX - targetX
        targetX = minScrollX + overshoot * bounceElasticity
        scrollVelocity = -scrollVelocity * bounceElasticity
    }
    
    // 更新容器位置
    scroller.position.x = targetX
}

关键优化说明 #

• 动量滑动：通过scrollVelocity记录拖动速度，结合摩擦系数在update中持续衰减，模拟真实的滑动惯性，比固定距离的SKAction更自然。
• 边界回弹：当容器超出边界时，计算超出量并应用弹性系数，让容器平滑回弹，同时反转速度并衰减，还原物理回弹的阻尼感。
• 拖动边界限制：拖动时直接将容器限制在边界内，避免拖动过程中过度超出，提升交互流畅度。

额外建议 #

• 若需要更细腻的拖动体验，可将拖动时的硬边界限制改为软弹性限制（拖动超出边界时，容器移动幅度随超出量递减）。
• 滚动条可通过添加SKNode指示器实现：根据容器当前滚动位置，计算指示器的X坐标 = (scroller.position.x - minScrollX) / (maxScrollX - minScrollX) * 可视区域宽度。

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