如何在 SwiftUI 中为核心图像过滤器设置动画

Question

我想应用给定的 CIFilter，但不是立即显示效果，而是想对其进行动画处理。 例如，我想在 2 秒内将彩色图像去饱和到灰度，或者通过在 0.8 秒内使用 EaseInOut 动画曲线将块状图像去像素化为全分辨率图像来解决块状图像。

如果您使用的是内置的 SwiftUI 视图修饰符之一，例如 .blur()，那么您就是金子。 只需附加一些 .animate() 变体即可。

但是，考虑到无论您使用 WWDC 2022 示例代码中的 UIImage、CGImage、CIImage 路线还是 MTLView、CIRenderDestination、ContentView 示例，您都必须跳过障碍，我有点困惑。

理想情况下，我想我只想为我想要做的每个效果编写视图修改器，以便它们与 SwiftUI 内置的一样可用，但我不知道这是否可能。 有没有一种幸运的方法可以做到这一点？ 有任何想法吗？

Answer 1

这是一种适应Animatable的方法。 您可以轻松地适应您的需求：

struct ContentView: View {
    
    @State private var animate = false

    var body: some View {
        VStack {
            PixellatedImage(imageName: "yoga", scale: animate ? 100 : 1)
                .scaledToFit()
        }
        .padding()
        .onAppear {
            withAnimation(Animation.linear(duration: 3.0).repeatForever()) {
                self.animate.toggle()
            }
        }
    }
}


struct PixellatedImage: View, Animatable {
    
    let imageName: String
    var scale: CGFloat
    
    var animatableData: CGFloat {
        get { scale }
        set { scale = newValue }
    }
    
    var body: some View {
        Image(uiImage: pixellatedImage(imageName: imageName, scale: scale))
            .resizable()
    }
}


func pixellatedImage(imageName: String, scale: Double) -> UIImage {
    if let inputImage = UIImage(named: imageName) {
        let context = CIContext(options: nil)
        
        if let currentFilter = CIFilter(name: "CIPixellate") {
            let beginImage = CIImage(image: inputImage)
            currentFilter.setValue(beginImage, forKey: kCIInputImageKey)
            currentFilter.setValue(scale, forKey: kCIInputScaleKey)
            
            if let output = currentFilter.outputImage {
                if let cgimg = context.createCGImage(output, from: output.extent) {
                    let processedImage = UIImage(cgImage: cgimg)
                    return processedImage
                }
            }
        }
    }
    return UIImage() // empty default instead of nil
}