Swift iOS图片拼图碎片点击按钮逐步显示异常问题排查

可能的原因 #

你遇到的右上圆角异常视图，大概率是以下两个原因之一：

• profileImageView的原始图片未隐藏：动画中你显示了profileImageView，但它的原图还在碎片下方，如果这个ImageView本身设置了右上圆角，就会透过碎片边缘（或因裁剪）显示出来。
• 代码结构错误：你的setUpPuzzleView函数里，嵌套的for row循环没有闭合，导致后续代码（比如cropImage函数）被错误包含在循环内，可能引发意外的视图渲染。

具体修复步骤 #

1. 隐藏profileImageView的原始图片
   生成拼图碎片后，把profileImageView的image设为nil，避免原图和碎片叠加：

func setUpPuzzleView() {
    let originalImage = UIImage(named: "photo")
    self.profileImageView.image = originalImage

    // ... 生成拼图碎片的代码 ...

    // 生成完碎片后清空原图
    self.profileImageView.image = nil
}

2. 修正代码的循环闭合问题
   检查setUpPuzzleView函数，确保嵌套的for循环正确闭合，把cropImage函数放在setUpPuzzleView外面：

func setUpPuzzleView() {
    let originalImage = UIImage(named: "photo")
    self.profileImageView.image = originalImage

    // Break the face image into puzzle pieces and scatter them randomly
    for row in 0..<4 {
        for column in 0..<4 {
            // ... 生成单个碎片的代码 ...
            puzzlePiece.transform = CGAffineTransform(translationX: randomXOffset, y: randomYOffset)
        } // 闭合column循环
    } // 闭合row循环

    // 清空原图
    self.profileImageView.image = nil
}

// MARK: - Crop Image
func cropImage(image: UIImage, rect: CGRect) -> UIImage {
    // ... 裁剪代码保持不变 ...
}

3. 检查并清除不必要的圆角设置
   如果你的profileImageView不需要圆角，检查Storyboard或代码中是否设置了cornerRadius和masksToBounds，把它们移除：

// 移除这类设置（如果存在的话）
// profileImageView.layer.cornerRadius = 16
// profileImageView.layer.maskedCorners = [.layerMaxXMinYCorner] // 右上圆角
// profileImageView.clipsToBounds = true

额外优化（可选） #

如果想让拼图归位动画更有层次感，可以给每个碎片添加延迟动画：

@IBAction func onRevealPhoto(_ sender: UIButton) {
    self.containerView.isHidden = true
    self.profileImageView.isHidden = false

    for (index, puzzlePiece) in self.puzzlePieces.enumerated() {
        let delay = Double(index) * 0.05 // 每个碎片延迟0.05秒
        UIView.animate(withDuration: 1.0, delay: delay, options: .curveEaseOut) {
            puzzlePiece.transform = .identity
            puzzlePiece.isHidden = false
        }
    }
}

内容的提问来源于stack exchange，提问作者Dimpy-iRoid