如何避免UIButton的touchDragEnter与touchDragExit频繁触发？

Hey, I’ve run into this exact issue when building interactive buttons before! It’s super annoying how touchDragEnter and touchDragExit spam calls when your finger hovers right on the button’s edge, leading to janky, repeated animations. Here are two solid solutions to fix this:

方案1：状态锁（最简单直接的方式） #

核心思路是给按钮加一个状态标记，只有当实际状态发生变化时才执行动画，避免重复触发。我们可以定义一个枚举或者布尔值来跟踪当前按钮的交互状态，确保同一状态下的动画不会重复执行。

代码示例（Swift） #

// 定义按钮的交互状态
enum ButtonInteractionState {
    case normal, highlighted
}

class AnimatedButton: UIButton {
    // 跟踪当前状态，初始为normal
    private var currentState: ButtonInteractionState = .normal
    
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesBegan(touches, with: event)
        // 只有当前不是高亮状态时，才执行进入动画
        guard currentState != .highlighted else { return }
        runEnterAnimation()
        currentState = .highlighted
    }
    
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesEnded(touches, with: event)
        resetToNormalState()
    }
    
    override func touchesCancelled(_ touches: Set<UITouch>, with event: UIEvent?) {
        super.touchesCancelled(touches, with: event)
        resetToNormalState()
    }
    
    override func touchDragEnter(_ event: UIEvent?) {
        super.touchDragEnter(event)
        guard currentState != .highlighted else { return }
        runEnterAnimation()
        currentState = .highlighted
    }
    
    override func touchDragExit(_ event: UIEvent?) {
        super.touchDragExit(event)
        guard currentState != .normal else { return }
        runExitAnimation()
        currentState = .normal
    }
    
    // 统一处理状态重置
    private func resetToNormalState() {
        guard currentState != .normal else { return }
        runExitAnimation()
        currentState = .normal
    }
    
    // 自定义进入动画（示例：缩放+透明度变化）
    private func runEnterAnimation() {
        UIView.animate(withDuration: 0.2, options: .beginFromCurrentState) {
            self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
            self.backgroundColor = UIColor.systemBlue.withAlphaComponent(0.8)
        }
    }
    
    // 自定义退出动画（恢复原状）
    private func runExitAnimation() {
        UIView.animate(withDuration: 0.2, options: .beginFromCurrentState) {
            self.transform = .identity
            self.backgroundColor = UIColor.systemBlue
        }
    }
}

方案2：用手势识别器接管交互（更灵活的控制） #

如果觉得系统的touch方法太“死板”，可以用UILongPressGestureRecognizer（设置最小长按时长为0，模拟按下即触发）来接管按钮的交互逻辑。这样我们可以在手势的.changed状态里自己判断手指是否在按钮范围内，完全控制状态切换的时机，从根源上避免频繁触发。

代码示例（Swift） #

class AnimatedButton: UIButton {
    private var isHighlightedState = false
    
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupGestureRecognizer()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupGestureRecognizer()
    }
    
    private func setupGestureRecognizer() {
        let longPress = UILongPressGestureRecognizer(target: self, action: #selector(handleButtonGesture(_:)))
        longPress.minimumPressDuration = 0 // 按下立即触发，不需要等待
        addGestureRecognizer(longPress)
    }
    
    @objc private func handleButtonGesture(_ gesture: UILongPressGestureRecognizer) {
        // 获取手指在按钮上的位置
        let touchLocation = gesture.location(in: self)
        let isFingerInside = bounds.contains(touchLocation)
        
        switch gesture.state {
        case .began, .changed:
            // 手指进入按钮且当前未高亮，执行进入动画
            if isFingerInside && !isHighlightedState {
                runEnterAnimation()
                isHighlightedState = true
            }
            // 手指滑出按钮且当前高亮，执行退出动画
            else if !isFingerInside && isHighlightedState {
                runExitAnimation()
                isHighlightedState = false
            }
        case .ended, .cancelled, .failed:
            // 手势结束/取消，强制恢复正常状态
            if isHighlightedState {
                runExitAnimation()
                isHighlightedState = false
            }
        default:
            break
        }
    }
    
    // 同样的动画方法
    private func runEnterAnimation() {
        UIView.animate(withDuration: 0.2, options: .beginFromCurrentState) {
            self.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
            self.backgroundColor = UIColor.systemBlue.withAlphaComponent(0.8)
        }
    }
    
    private func runExitAnimation() {
        UIView.animate(withDuration: 0.2, options: .beginFromCurrentState) {
            self.transform = .identity
            self.backgroundColor = UIColor.systemBlue
        }
    }
}

额外注意事项 #

• 动画里加上options: .beginFromCurrentState很重要，它会让动画从当前的视图状态开始执行，避免多个动画叠加导致的奇怪效果。
• 别忘了处理touchCancel和手势的.cancelled状态，否则如果按钮突然失去交互（比如弹出弹窗），状态会卡住。
• 如果你的动画比较复杂（比如有弹簧效果），可以调整动画时长和选项，确保过渡平滑。

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