SwiftUI — 动画的节流与防抖

“节流” 或 “防抖” 技术在动画、拖拽、UI 交互中非常常见，用于防止某些事件（例如 onChanged 的回调）被高频触发过多，从而优化性能或创建更流畅的用户体验。

在 SwiftUI 的拖拽和动画中，处理频繁触发的回调（例如在 onChanged 中的事件）通常可以使用以下技术：

1. 使用 throttle（节流）技术 #

throttle 技术会限制事件触发的频率。例如，如果 onChanged 触发速率很高，节流会确保事件只在某个时间间隔触发一次。
具体作用： 减少高频回调的调用次数，性能优化常用方法。

Swift 的解决方案：使用 Combine 框架 #

通过 Combine 框架中的 .throttle 操作符，来限制事件（比如拖拽或按压的回调）触发的频率。

示例：拖拽并节流变化 #

import SwiftUI
import Combine

struct ThrottledDragGestureView: View {
    @State private var position: CGFloat = 0
    @State private var throttledValue: CGFloat = 0
    @State private var cancellable: AnyCancellable?

    var body: some View {
        VStack {
            Text("Position: \(throttledValue)")
                .padding()

            Rectangle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .offset(x: position)

                // 添加拖拽手势
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            // 更新原始位置
                            position = value.translation.width
                        }
                        .onEnded { _ in
                            // 手指松开后重置位置
                            position = 0
                        }
                )
        }
        .onAppear {
            // 将事件通过 Combine 节流
            let publisher = $position
                .throttle(for: .milliseconds(200), scheduler: RunLoop.main, latest: true)
                .removeDuplicates()

            cancellable = publisher
                .sink { value in
                    // 节流后的值更新
                    throttledValue = value
                }
        }
    }
}

关键点： #

  1. Combine 的 .throttle:

    • 每 200 毫秒触发一次（throttle(for: .milliseconds(200), scheduler: RunLoop.main)）。
    • latest: true: 意味着在时间间隔结束时，始终返回最新触发的值。

  2. 实时值与节流值对比：

    • position 是手指拖拽的实时位置，但 throttledValue 更新频率较低（比如 200 毫秒一次）。

2. 使用 debounce（防抖）技术 #

debounce 技术会延迟事件触发，确保回调只发生在用户停止连续操作（比如拖拽）一定时间后。
适用场景： 适合需要在用户停止操作后处理变化的场景（不像节流直接减少频率）。

示例：拖拽并防抖响应 #

import SwiftUI
import Combine

struct DebouncerDragGestureView: View {
    @State private var position: CGFloat = 0
    @State private var debouncedValue: CGFloat = 0
    @State private var cancellable: AnyCancellable?

    var body: some View {
        VStack {
            Text("Position (debounced): \(debouncedValue)")
                .padding()

            Rectangle()
                .fill(Color.blue)
                .frame(width: 100, height: 100)
                .offset(x: position)

                // 添加拖拽手势
                .gesture(
                    DragGesture()
                        .onChanged { value in
                            // 动态更新位置
                            position = value.translation.width
                        }
                        .onEnded { _ in
                            // 手指松开后位置恢复
                            position = 0
                        }
                )
        }
        .onAppear {
            let publisher = $position
                .debounce(for: .milliseconds(200), scheduler: RunLoop.main)
                .removeDuplicates()
            
            cancellable = publisher
                .sink { value in
                    // 防抖后的值
                    debouncedValue = value
                }
        }
    }
}

关键点： #

  1. Combine 的 .debounce:
    • 当用户停止操作（比如 200 毫秒后没有更新）时才触发值更新。
    • 值实时更新完毕后等候一段时间，没有新值进入才会触发。

3. 使用 dispatch 队列人工节流 #

不依赖 Combine，可以通过 GCD（DispatchQueue）实现节流（Throttle）。
这种方法适合你在项目中不使用 Combine 框架的情况。

实现节流逻辑的函数： #

class Throttle {
    private var lastExecution: Date = .distantPast
    private let queue = DispatchQueue(label: "ThrottleQueue")
    
    func throttle(interval: TimeInterval, execute: @escaping () -> Void) {
        queue.async {
            let now = Date()
            guard self.lastExecution.addingTimeInterval(interval) < now else { return }
            self.lastExecution = now
            DispatchQueue.main.async(execute: execute)
        }
    }
}

应用节流到手势代码中： #

struct ManualThrottleDragGestureView: View {
    @State private var position: CGFloat = 0
    private let throttle = Throttle()

    var body: some View {
        Rectangle()
            .fill(Color.blue)
            .frame(width: 100, height: 100)
            .offset(x: position)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        throttle.throttle(interval: 0.2) {
                            position = value.translation.width
                        }
                    }
            )
    }
}

关键点： #

  1. 自定义节流器：
    • Throttle 类通过时间间隔（interval）控制回调的触发频率。
  2. 通常效果类似 Combine 的 .throttle，但更加灵活，可以与非 Combine 框架代码兼容。

4. 使用 SwiftUI 的 .animation() 减缓高频响应 #

在一些高频交互场景中（如拖拽），可以通过指定动画，降低状态变化过于频繁的视觉冲击。这种方法并不会限制数据触发的频率，但会让界面更新用平滑的动画过渡。

示例：拖拽并限制视觉变化频率 #

struct SmoothAnimationView: View {
    @State private var position: CGFloat = 0

    var body: some View {
        Rectangle()
            .fill(Color.green)
            .frame(width: 100, height: 100)
            .offset(x: position)
            // 添加动画过渡
            .animation(.easeOut(duration: 0.2), value: position)
            .gesture(
                DragGesture()
                    .onChanged { value in
                        // 动态更新位置
                        position = value.translation.width
                    }
            )
    }
}

关键点： #

  1. .animation() 方法：
    • 为某个绑定状态增加动画过渡，它不会减少数据触发频率，但会让界面更新变得平滑。
  2. 适用于高频率回调，但要求显示效果流畅的场景。

5. 节流 vs 防抖 vs 动画效果对比 #

技术概念使用场景
节流 (Throttle)限制高频触发的频率，比如确保每隔一定时间触发一次回调。拖拽手势、滚动手势等需要减少高频触发回调的场景，比如每隔 200ms 更新一次位置信息。
防抖 (Debounce)确保在用户停止操作一段时间后才会触发事件，比如拖拽停止 200ms 后触发变化。用户停止操作后再进行处理的场景，比如响应搜索框输入、滑动操作停止后触发内容刷新等延迟型需求。
动画过渡不减少触发频率，而是通过动画过渡让频繁变化的 UI 看起来更平滑和流畅。拖拽中频繁触发状态变化，但需要视觉效果平滑的场景，比如拖动物体时的动态反馈。
手写 GCD 节流手动实现节流逻辑，与 Combine 无关，可以自定义调度和回调规则。不依赖 Combine 框架的场景，或者需要低级别细粒度控制回调频率时。

根据你的具体需求，如果希望 响应不频繁回调触发，建议优先使用 Combine 的 throttle 或 debounce，它们功能强大、易于实现并且与 SwiftUI 紧密集成。

本文共 1659 字，上次修改于 Jan 6, 2025