如何將 UIImage 從上到下緩慢過渡以對圖像應用濾鏡？

Question

我想讓它看起來好像我的圖像正在從上到下慢慢過濾。 我正在添加兩個圖像視圖。 我處理過的圖像在后台，未處理的在前面。 我正在使未處理圖像的高度為 0。這是我的代碼。

imageView.frame = CGRect(x: 0, y: 100, width: self.view.bounds.size.width, height: 400)
imageView.image = processedImage


let nonProcessedImageView = UIImageView()
nonProcessedImageView.frame = CGRect(x: 0, y: 100, width: self.view.bounds.size.width, height: 400)
nonProcessedImageView.image = nonProcessedImage
view.addSubview(nonProcessedImageView)

UIView.transition(with: nonProcessedImageView,
                  duration: 5.0,
                  animations: {
   nonProcessedImageView.frame = CGRect(x: 0, y: 500, width: self.view.bounds.size.width, height: 0)
   },
                  completion: {_ in
   })

未處理的圖像甚至不會出現在已處理的圖像之上。

Answer 1

問題似乎是，在使用 UIView.Animate function 時，更改 animation 塊中幀的y坐標會導致問題。

看到這個答案

引用最重要的部分：

您應該改為更改 center 屬性（以移動視圖）和 bounds 屬性（以更改其大小）。 這些屬性的行為符合預期。

因為你只想降低高度，你不需要對y坐標做任何事情

let nonProcessedImageView = UIImageView()

var newImageFrame = imageView.frame

nonProcessedImageView.frame = newImageFrame
nonProcessedImageView.clipsToBounds = true
nonProcessedImageView.contentMode = .scaleAspectFit
nonProcessedImageView.image = imageView.image
view.addSubview(nonProcessedImageView)

// I set this to 1 instead of 0 as 0 does not show the image
// for some reason
newImageFrame.size.height = 1

// Update your processed image
imageView.image = processedImage

UIView.animate(withDuration: 5.0) {
    nonProcessedImageView.frame = newImageFrame
}
completion: { (isComplete) in
    if isComplete {
        nonProcessedImageView.removeFromSuperview()
    }
}

這給出了一些結果，但如您所見，animation 不是很好，因為當您降低高度時，圖像視圖的contentMode開始並給出看到的效果。

為獲得最佳效果，請將新圖像視圖添加到 UIView 並降低 UIView 而不是 UIImageView 的高度

var newImageFrame = imageView.frame

let containerView = UIView(frame: newImageFrame)
containerView.clipsToBounds = true

let nonProcessedImageView = UIImageView()
nonProcessedImageView.frame = containerView.bounds
nonProcessedImageView.clipsToBounds = true
nonProcessedImageView.contentMode = .scaleAspectFit // same as original
nonProcessedImageView.image = imageView.image

containerView.addSubview(nonProcessedImageView)
view.addSubview(containerView)

newImageFrame.size.height = 1

imageView.image = processedImage

UIView.animate(withDuration: 3.0) {
    containerView.frame = newImageFrame
}
completion: { (isComplete) in
    if isComplete {
        containerView.removeFromSuperview()
    }
}

這應該給你你想要的：

Answer 2

這適用於從上到下的過渡。

imageView.frame = CGRect(x: 0, y: 100, width: self.view.bounds.width, height: 400)
imageView.image = nonProcessedImage
view.addSubview(imageView)
    
let frontView = UIView(frame: CGRect(x: 0, y: 100, width: self.view.frame.width, height: 0))
frontView.clipsToBounds = true
view.addSubview(frontView)

let nonProcessedImageView = UIImageView(frame: CGRect(x: 0, y: 0, width: self.view.bounds.size.width, height: 400))
nonProcessedImageView.image = processedImage
nonProcessedImageView.clipsToBounds = true
frontView.addSubview(nonProcessedImageView)
    
UIView.transition(with: frontView, duration: 5, options: [.allowAnimatedContent], animations: {
    frontView.frame = CGRect(x: 0, y: 100, width: self.view.frame.width, height: 400)
}, completion: nil)