如何实现UISwitch切换动画？自定义UISwitch多元素同步动画方案

1. 如何为UISwitch的切换操作添加动画效果？ #

首先，系统自带的UISwitch在用户手动点击切换时已经有默认的滑动动画了。如果是通过代码手动控制开关状态并想要带动画效果，直接调用它的setOn(_:animated:)方法即可，这是最简洁的方式：

// 切换开关状态并显示动画
mySystemSwitch.setOn(!mySystemSwitch.isOn, animated: true)

如果需要更定制化的联动动画（比如开关切换时同步改变背景色、其他视图的状态），可以将状态变更放在UIView.animate块中，注意此时要把setOn的animated参数设为false，避免系统动画和自定义动画冲突：

UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut) {
    // 无动画设置开关状态，交给外部动画块处理
    self.mySystemSwitch.setOn(!self.mySystemSwitch.isOn, animated: false)
    // 同步添加其他动画效果，比如背景色变化
    self.view.backgroundColor = self.mySystemSwitch.isOn ? .systemGreen : .systemGray5
}

要是你需要更精细的动画控制（比如快慢节奏、弹簧效果），可以用UIViewPropertyAnimator来实现，它支持暂停、反向等高级操作。

2. 自定义模拟UISwitch控件：同步图片位移、资源更新与UI变化 #

要实现这种高度定制的开关控件，我们需要自定义UIControl（继承它可以方便处理触摸事件和发送valueChanged事件，和系统开关行为一致）。核心思路是：管理开关的isOn状态，在状态变更时同步触发滑块位移、图片切换、背景色变化和文字更新的动画。

步骤1：自定义UIControl的核心实现 #

import UIKit

class CustomToggleSwitch: UIControl {
    // 可配置的公共属性，方便外部自定义样式
    var isOn: Bool = false {
        didSet {
            updateUIWithAnimation()
            sendActions(for: .valueChanged) // 触发系统标准的valueChanged事件
        }
    }
    
    // 自定义资源配置
    var onThumbImage: UIImage!
    var offThumbImage: UIImage!
    var onBackgroundColor: UIColor = .systemGreen
    var offBackgroundColor: UIColor = .systemGray5
    var onText: String = "ON"
    var offText: String = "OFF"
    
    // 子视图与约束属性（用于动画时修改位置）
    private let backgroundView = UIView()
    private let thumbImageView = UIImageView()
    private let statusLabel = UILabel()
    
    private var thumbLeadingConstraint: NSLayoutConstraint!
    private var thumbTrailingConstraint: NSLayoutConstraint!
    private var labelLeadingConstraint: NSLayoutConstraint!
    private var labelTrailingConstraint: NSLayoutConstraint!
    
    // 初始化方法
    override init(frame: CGRect) {
        super.init(frame: frame)
        setupSubviews()
        updateUIWithoutAnimation()
    }
    
    required init?(coder: NSCoder) {
        super.init(coder: coder)
        setupSubviews()
        updateUIWithoutAnimation()
    }
    
    // 布局子视图与约束
    private func setupSubviews() {
        // 配置背景视图
        backgroundView.layer.cornerRadius = bounds.height / 2
        backgroundView.clipsToBounds = true
        addSubview(backgroundView)
        
        // 配置滑块图片
        thumbImageView.contentMode = .scaleAspectFit
        thumbImageView.layer.cornerRadius = 14
        thumbImageView.clipsToBounds = true
        thumbImageView.layer.shadowColor = UIColor.black.cgColor
        thumbImageView.layer.shadowOffset = CGSize(width: 0, height: 2)
        thumbImageView.layer.shadowOpacity = 0.3
        thumbImageView.layer.shadowRadius = 2
        addSubview(thumbImageView)
        
        // 配置状态文字
        statusLabel.font = UIFont.systemFont(ofSize: 14, weight: .semibold)
        statusLabel.textColor = .white
        addSubview(statusLabel)
        
        // 关闭自动布局转译，设置约束
        [backgroundView, thumbImageView, statusLabel].forEach {
            $0.translatesAutoresizingMaskIntoConstraints = false
        }
        
        NSLayoutConstraint.activate([
            // 背景视图铺满整个控件
            backgroundView.topAnchor.constraint(equalTo: topAnchor),
            backgroundView.leadingAnchor.constraint(equalTo: leadingAnchor),
            backgroundView.trailingAnchor.constraint(equalTo: trailingAnchor),
            backgroundView.bottomAnchor.constraint(equalTo: bottomAnchor),
            
            // 滑块尺寸与垂直居中
            thumbImageView.widthAnchor.constraint(equalToConstant: 28),
            thumbImageView.heightAnchor.constraint(equalToConstant: 28),
            thumbImageView.centerYAnchor.constraint(equalTo: centerYAnchor),
            
            // 滑块位置约束（用于动画切换）
            thumbLeadingConstraint = thumbImageView.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 4),
            thumbTrailingConstraint = thumbImageView.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -4),
            
            // 文字垂直居中
            statusLabel.centerYAnchor.constraint(equalTo: centerYAnchor),
            
            // 文字位置约束（用于动画切换）
            labelLeadingConstraint = statusLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 8),
            labelTrailingConstraint = statusLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -8)
        ])
    }
    
    // 无动画更新UI（初始化时调用）
    private func updateUIWithoutAnimation() {
        backgroundView.backgroundColor = isOn ? onBackgroundColor : offBackgroundColor
        thumbImageView.image = isOn ? onThumbImage : offThumbImage
        statusLabel.text = isOn ? onText : offText
        
        // 设置初始位置约束
        thumbLeadingConstraint.isActive = !isOn
        thumbTrailingConstraint.isActive = isOn
        labelLeadingConstraint.isActive = isOn
        labelTrailingConstraint.isActive = !isOn
    }
    
    // 带动画同步更新所有UI元素
    private func updateUIWithAnimation() {
        // 先更新约束状态
        thumbLeadingConstraint.isActive = !isOn
        thumbTrailingConstraint.isActive = isOn
        labelLeadingConstraint.isActive = isOn
        labelTrailingConstraint.isActive = !isOn
        
        // 触发动画：同步更新背景色、图片、文字与位置
        UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut) {
            self.backgroundView.backgroundColor = self.isOn ? self.onBackgroundColor : self.offBackgroundColor
            self.thumbImageView.image = self.isOn ? self.onThumbImage : self.offThumbImage
            self.statusLabel.text = self.isOn ? self.onText : self.offText
            self.layoutIfNeeded() // 让约束变更生效并带动画
        }
    }
    
    // 处理触摸事件，实现点击切换逻辑
    override func beginTracking(_ touch: UITouch, with event: UIEvent?) -> Bool {
        return true // 允许跟踪触摸操作
    }
    
    override func endTracking(_ touch: UITouch?, with event: UIEvent?) {
        guard let touch = touch, bounds.contains(touch.location(in: self)) else {
            super.endTracking(touch, with: event)
            return
        }
        // 切换开关状态
        isOn.toggle()
        super.endTracking(touch, with: event)
    }
}

步骤2：使用自定义开关控件 #

在ViewController中初始化并配置自定义开关：

class ViewController: UIViewController {
    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .white
        
        // 创建自定义开关
        let customSwitch = CustomToggleSwitch(frame: CGRect(x: 50, y: 200, width: 100, height: 32))
        // 配置本地图片资源
        customSwitch.onThumbImage = UIImage(named: "on_thumb")
        customSwitch.offThumbImage = UIImage(named: "off_thumb")
        // 自定义样式
        customSwitch.onBackgroundColor = .systemBlue
        customSwitch.offBackgroundColor = .systemGray
        customSwitch.onText = "开启"
        customSwitch.offText = "关闭"
        // 添加状态变化监听
        customSwitch.addTarget(self, action: #selector(switchValueChanged(_:)), for: .valueChanged)
        
        view.addSubview(customSwitch)
    }
    
    @objc private func switchValueChanged(_ sender: CustomToggleSwitch) {
        print("当前开关状态：\(sender.isOn)")
    }
}

关键说明 #

• 用didSet监听isOn状态变更，自动触发UI更新和事件发送，和系统UISwitch行为一致。
• 通过修改约束的isActive状态，配合layoutIfNeeded实现滑块和文字的位移动画，比直接修改frame更符合AutoLayout规范。
• 所有UI变化（背景色、图片、文字、位置）都放在同一个动画块中，保证同步执行，提升UX一致性。

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