如何使UIImageView、UIView及CollectionViewCell多视图同步动画如同单一图层？

刚好之前做卡片交互的时候踩过类似的坑，要让Collection View Cell里的多个视图（比如你的ImageView和canvas）像一个整体动起来，其实有几种靠谱的方法，按优雅度排序给你讲：

方法一：用容器视图统一管理（最推荐） #

核心思路就是把需要同步的视图都塞进一个容器视图里，然后只给这个容器加动画——这样容器里的所有子视图会自动跟着父视图同步变化，完全不用单独处理每个视图的动画。

代码重构步骤： #

原来你是直接把ImageView和canvas加到contentView里，现在改成先创建一个容器视图：

// 在cell的初始化方法（比如init(style:reuseIdentifier:)或者awakeFromNib里）
override init(style: UICollectionViewCell.CellStyle, reuseIdentifier: String?) {
    super.init(style: style, reuseIdentifier: reuseIdentifier)
    setupViews()
}

required init?(coder: NSCoder) {
    super.init(coder: coder)
    setupViews()
}

private func setupViews() {
    // 1. 创建容器视图，和contentView边界完全对齐
    let containerView = UIView(frame: contentView.bounds)
    containerView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    contentView.addSubview(containerView)
    
    // 2. 把ImageView和canvas加到容器里，同样对齐容器边界
    let imageView = UIImageView(image: UIImage(named: "your-image"))
    imageView.frame = containerView.bounds
    imageView.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    containerView.addSubview(imageView)
    
    let canvas = UIView()
    canvas.backgroundColor = UIColor.red.withAlphaComponent(0.3)
    canvas.frame = containerView.bounds
    canvas.autoresizingMask = [.flexibleWidth, .flexibleHeight]
    containerView.addSubview(canvas)
}

动画示例： #

之后不管你做缩放、平移还是透明度动画，只需要操作容器视图就行：

// 比如做一个点击缩放的动画
func animateCell() {
    UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut) {
        self.containerView.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
    } completion: { _ in
        UIView.animate(withDuration: 0.3) {
            self.containerView.transform = .identity
        }
    }
}

这种方法的好处是：后续再加新的子视图，直接丢进容器就行，不用改动画代码，绝对不会出现不同步的情况。

方法二：同步更新多个视图的动画属性（适合不想改层级的场景） #

如果暂时不想调整视图层级，那你可以在同一个动画块里，给ImageView和canvas设置完全相同的动画参数（时长、曲线、目标属性），强制让它们同步。

代码示例： #

func animateViewsDirectly() {
    UIView.animate(withDuration: 0.3, delay: 0, options: .curveEaseInOut) {
        // 给两个视图设置完全一样的transform
        self.imageView.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
        self.canvas.transform = CGAffineTransform(scaleX: 0.95, y: 0.95)
        // 如果是透明度、frame变化，也保持完全一致
        self.imageView.alpha = 0.8
        self.canvas.alpha = 0.8
    } completion: { _ in
        UIView.animate(withDuration: 0.3) {
            self.imageView.transform = .identity
            self.canvas.transform = .identity
            self.imageView.alpha = 1.0
            self.canvas.alpha = 1.0
        }
    }
}

⚠️ 注意：这种方法的缺点是维护成本高，要是后续加了第三、第四个视图，你得一个个把它们的动画属性加进去，而且万一某个参数写错了（比如时长设成0.2 instead of 0.3），就会出现不同步的尴尬情况。

方法三：用Core Animation容器图层（适合复杂动画场景） #

如果你的动画涉及到Core Animation的高级特性（比如3D变换、阴影动画），可以把两个视图的图层加到一个容器CALayer里，然后给容器图层加动画，原理和容器视图一样。

代码示例： #

private func setupLayers() {
    let containerLayer = CALayer()
    containerLayer.frame = contentView.bounds
    contentView.layer.addSublayer(containerLayer)
    
    // 添加ImageView的图层
    let imageLayer = CALayer()
    imageLayer.frame = containerLayer.bounds
    imageLayer.contents = UIImage(named: "your-image")?.cgImage
    containerLayer.addSublayer(imageLayer)
    
    // 添加canvas的图层
    let canvasLayer = CALayer()
    canvasLayer.frame = containerLayer.bounds
    canvasLayer.backgroundColor = UIColor.red.withAlphaComponent(0.3).cgColor
    containerLayer.addSublayer(canvasLayer)
}

// 动画示例：给容器图层加缩放动画
func animateLayers() {
    let scaleAnim = CABasicAnimation(keyPath: "transform.scale")
    scaleAnim.fromValue = 1.0
    scaleAnim.toValue = 0.95
    scaleAnim.duration = 0.3
    scaleAnim.autoreverses = true
    containerLayer.add(scaleAnim, forKey: "containerScale")
}

总结 #

优先选方法一，视图层级清晰，动画维护成本极低，绝对能保证两个视图像单一图层一样同步联动。如果是临时需求不想改层级，可以用方法二，但要注意参数一致性。复杂Core Animation场景再考虑方法三。

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