使用NSLayoutConstraints在UIView上实现简单的上滑式动画

基础概念

NSLayoutConstraints 是 iOS 开发中用于定义视图布局的类。通过它，可以设置视图之间的相对位置和大小，而不需要直接操作视图的 frame。这种布局方式更加灵活，且能更好地适应不同屏幕尺寸和方向。

类型

NSLayoutConstraints 主要有以下几种类型：

边距约束（Margin Constraints）：定义视图与其父视图边缘的距离。
宽度约束（Width Constraints）：定义视图的宽度。
高度约束（Height Constraints）：定义视图的高度。
中心约束（Center Constraints）：定义视图相对于其父视图的中心点位置。
相对位置约束（Relative Position Constraints）：定义视图相对于其他视图的位置。

应用场景

在需要动态改变视图布局的场景中，如动画、响应式设计等，NSLayoutConstraints 非常有用。

实现简单的上滑式动画

以下是一个使用 NSLayoutConstraints 实现 UIView 上滑式动画的示例代码：

import UIKit

class ViewController: UIViewController {
    
    let animatedView = UIView()
    let animator = UIViewPropertyAnimator(duration: 1.0, curve: .easeInOut) {
        self.animatedView.frame.origin.y -= 100
    }
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // 设置初始布局
        animatedView.backgroundColor = .blue
        animatedView.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(animatedView)
        
        NSLayoutConstraint.activate([
            animatedView.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 20),
            animatedView.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -20),
            animatedView.heightAnchor.constraint(equalToConstant: 100),
            animatedView.centerYAnchor.constraint(equalTo: view.centerYAnchor)
        ])
        
        // 添加按钮触发动画
        let button = UIButton(type: .system)
        button.setTitle("Slide Up", for: .normal)
        button.addTarget(self, action: #selector(startAnimation), for: .touchUpInside)
        button.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(button)
        
        NSLayoutConstraint.activate([
            button.centerXAnchor.constraint(equalTo: view.centerXAnchor),
            button.topAnchor.constraint(equalTo: animatedView.bottomAnchor, constant: 20)
        ])
    }
    
    @objc func startAnimation() {
        animator.startAnimation()
    }
}

解释

初始化视图：创建一个 UIView 并设置其背景颜色。
禁用自动调整 frame：将 translatesAutoresizingMaskIntoConstraints 设置为 false，以便使用 NSLayoutConstraints 进行布局。
添加约束：使用 NSLayoutConstraint.activate 方法添加约束，定义视图的位置和大小。
创建动画：使用 UIViewPropertyAnimator 创建一个动画，改变视图的 frame。
触发动画：通过按钮点击事件触发动画。