如何将 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 函数时更改动画块中帧的 y 坐标会导致出现问题。

请参阅此答案

引用最重要的部分：

您应该更改中心属性（以移动视图）和边界
属性（以更改其大小）。这些属性的行为如下
预计。

由于您只想减小高度，因此不需要对 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()
    }
}

这会给出一些结果，但正如您所看到的，动画不太好，因为当您减小高度时，图像视图的 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)