Swift开发中UILabel跟随UISlider滑块移动时出现瞬时位置回弹问题

问题场景 #

自定义iOS视频播放器开发中，使用UISlider展示电影、电视剧类长视频的播放进度，需要实现显示当前播放时间的UILabel跟随滑块thumb移动的效果。现有实现下标签可跟随滑块移动，但会出现毫秒级先回到初始位置、再跳转至滑块位置的异常抖动。

现有问题代码 #

播放器时间观察者添加（viewWillAppear生命周期）

let labelUpdateInterval = CMTime(seconds: 0.000000001, preferredTimescale: CMTimeScale(NSEC_PER_SEC))
sliderObserver = player?.addPeriodicTimeObserver(forInterval: labelUpdateInterval, queue: DispatchQueue.main, using: { elapsedTime in
    self.followSlider()
})

标签位置更新方法

func followSlider() {
    let trackRect = progressBar.trackRect(forBounds: progressBar.frame)
    let thumbRect = progressBar.thumbRect(forBounds: progressBar.bounds, trackRect: trackRect, value: progressBar.value)
    trenutnoVrijemeLabel.center = CGPoint(x: thumbRect.midX, y: self.trenutnoVrijemeLabel.center.y)
}

问题根因 #

该抖动是三个逻辑缺陷叠加导致的：

• 刷新频率设置不合理：设置的1纳秒刷新间隔远超过iOS设备最高120Hz（约8ms/次）的屏幕刷新上限，高频无效触发会和系统布局刷新时序冲突，大量重复计算反而引发布局错乱。
• 位置计算逻辑错误：计算轨道rect时传入了progressBar.frame，该值是滑块在父视图上的坐标，属于父视图坐标系，而trackRect(forBounds:)要求传入控件自身的内部bounds，参数错误会导致轨道位置计算偶发偏差；同时调用位置计算前没有触发滑块提前完成布局，很多时候拿到的是滑块尚未更新位置时的默认初始坐标，直接导致标签先跳回起点、再跳到正确位置的现象。
• 状态冲突：用户主动拖动滑块时，UISlider会自主更新thumb位置，此时如果播放器时间观察者也在高频触发位置更新，两个更新逻辑时序冲突会进一步加剧抖动。

修复方案 #

1. 调整时间观察者刷新间隔，对齐人眼可感知的流畅度阈值即可，同时添加弱引用避免循环引用，增加交互状态判断，避免和用户拖动操作冲突：

// 0.1s的刷新间隔足够保证视觉流畅，不会产生卡顿感，也不会触发过多无效计算
let labelUpdateInterval = CMTime(seconds: 0.1, preferredTimescale: CMTimeScale(NSEC_PER_SEC))
sliderObserver = player?.addPeriodicTimeObserver(forInterval: labelUpdateInterval, queue: DispatchQueue.main, using: { [weak self] elapsedTime in
    guard let self = self else { return }
    // 用户正在拖动滑块时，不执行播放器触发的位置更新，避免状态冲突
    guard !self.progressBar.isTracking else { return }
    // 先同步滑块当前进度值，保证滑块显示和实际播放进度一致
    self.progressBar.value = Float(elapsedTime.seconds / self.totalPlayerDuration)
    self.followSlider()
})

2. 修正标签位置计算逻辑，提前触发滑块布局保证拿到的是最新位置，统一坐标系避免偏移：

func followSlider() {
    // 强制滑块完成当前待执行的布局，避免拿到未更新的默认位置
    progressBar.layoutIfNeeded()
    // 传入滑块自身bounds计算轨道rect，修正坐标系错误
    let trackRect = progressBar.trackRect(forBounds: progressBar.bounds)
    let thumbRect = progressBar.thumbRect(forBounds: progressBar.bounds, trackRect: trackRect, value: progressBar.value)
    // 将thumb中心点坐标转换到标签的父视图坐标系，避免坐标系不匹配导致的位置偏移
    let targetCenterX = progressBar.convert(CGPoint(x: thumbRect.midX, y: thumbRect.midY), to: trenutnoVrijemeLabel.superview).x
    trenutnoVrijemeLabel.center = CGPoint(x: targetCenterX, y: trenutnoVrijemeLabel.center.y)
}

3. 绑定滑块拖动事件，用户拖动时实时更新标签位置，保证交互流畅度：

// 视图加载阶段给滑块添加值变化监听
progressBar.addTarget(self, action: #selector(sliderDragging(_:)), for: .valueChanged)

@objc private func sliderDragging(_ slider: UISlider) {
    // 拖动过程中直接更新标签位置，不需要等待播放器时间回调
    followSlider()
    // 可在此处同步更新标签上显示的时间文本
}

注意：如果使用了自定义thumb图片，要确保调用thumbRect(forBounds:trackRect:value:)时传入的value和滑块当前展示的value完全一致，传入旧值也会导致位置计算偏差。

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