如何实现UIImageView从左上角到中心的尺寸与位置动画？

问题核心 #

动画后视图跳回原始位置，是因为Auto Layout约束覆盖了手动修改的frame。如果userImage通过Auto Layout添加了布局约束，直接修改frame会被系统约束引擎重置，导致动画失效。

解决方案 #

根据你的布局方式，选择以下两种方案之一：

方案1：禁用Auto Layout（直接修改frame）

若无需依赖Auto Layout，先确保视图不使用约束，再直接设置目标帧：

private func imageAnimates() {
    // 开启手动布局，禁用Auto Layout
    userImage.translatesAutoresizingMaskIntoConstraints = true
    // 清除视图上已有的约束（若之前添加过）
    userImage.removeConstraints(userImage.constraints)
    
    let screenBounds = UIScreen.main.bounds
    let finalSize = CGSize(width: screenBounds.width, height: screenBounds.width)
    // 计算中心位置的frame参数
    let finalX = (screenBounds.width - finalSize.width) / 2
    let finalY = (screenBounds.height - finalSize.height) / 2
    
    UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveLinear) {
        self.userImage.alpha = 1.0
        self.userImage.layer.cornerRadius = 0
        self.userImage.frame = CGRect(x: finalX, y: finalY, width: finalSize.width, height: finalSize.height)
    } completion: { finished in
        print("Image animated")
    }
}

方案2：Auto Layout约束动画（推荐）

若项目依赖Auto Layout，通过修改约束实现动画是iOS最佳实践：

1. 提前保存初始约束的引用：

// 类内定义约束变量
private var imageTopConstraint: NSLayoutConstraint!
private var imageLeadingConstraint: NSLayoutConstraint!
private var imageWidthConstraint: NSLayoutConstraint!
private var imageHeightConstraint: NSLayoutConstraint!

// 视图初始化时设置初始约束
private func setupImageView() {
    userImage.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(userImage)
    
    // 初始状态：左上角定位+小尺寸
    imageTopConstraint = userImage.topAnchor.constraint(equalTo: view.topAnchor)
    imageLeadingConstraint = userImage.leadingAnchor.constraint(equalTo: view.leadingAnchor)
    imageWidthConstraint = userImage.widthAnchor.constraint(equalToConstant: 100) // 初始宽度
    imageHeightConstraint = userImage.heightAnchor.constraint(equalToConstant: 100) // 初始高度
    
    NSLayoutConstraint.activate([
        imageTopConstraint,
        imageLeadingConstraint,
        imageWidthConstraint,
        imageHeightConstraint
    ])
    
    userImage.layer.cornerRadius = 50 // 初始圆角
    userImage.clipsToBounds = true // 必须设置，否则圆角不生效
}

2. 修改动画方法，更新约束并触发布局：

private func imageAnimates() {
    let screenWidth = UIScreen.main.bounds.width
    let screenHeight = UIScreen.main.bounds.height
    
    // 更新约束到目标状态
    imageTopConstraint.constant = (screenHeight - screenWidth) / 2
    imageLeadingConstraint.constant = (screenWidth - screenWidth) / 2
    imageWidthConstraint.constant = screenWidth
    imageHeightConstraint.constant = screenWidth
    userImage.layer.cornerRadius = 0
    
    // 执行约束动画
    UIView.animate(withDuration: 0.5, delay: 0.0, options: .curveLinear) {
        self.userImage.alpha = 1.0
        self.view.layoutIfNeeded() // 触发约束更新动画
    } completion: { finished in
        print("Image animated")
    }
}

关键注意点 #

• 必须设置userImage.clipsToBounds = true，否则圆角动画不会生效。
• 若初始视图为隐藏状态（alpha=0），需确保动画前视图已添加到父视图中。

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