如何在swiftui中对核心图像过滤器进行动画动画

Question

我想应用一个给定的cifilter，但我想对其进行动画效果，而不是立即出现的效果。例如，我想在2秒内将颜色图像保留为灰度，或通过将其放松的动画曲线超过0.8秒将其深入到完整的图像来解决块状图像。

如果您使用的是内置的SwiftUi视图修饰符，例如.blur（），那么您是金色的。只需附加一些.ainimate（）变体，就完成了。

但是，鉴于您必须跳过篮球，无论您是使用UIImage，CGIMAGE，CIIMAGE路线还是MTLView，CirenderDestination，ContentView from wwdc 2022示例代码，我有点困惑。

理想情况下，我想我只想为我想做的每种效果编写视图修饰符，以便它们与Swiftui内置的效果一样可用，但是我不知道这是否可能。这样做有幸福的方式吗？有什么想法吗？

Answer 1

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

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
}