如何在 SwiftUI 中为图像设置动画，播放帧动画

Question

我想在 SwiftUI 的图像视图中为图像设置动画

首先，我尝试创建一些变量和一个函数来切换 Image("imageVariable")。它改变了但没有动画甚至尝试了该withAnimation { }方法

其次，我尝试使用 UIKit 视图。在这里，动画有效，但我无法应用resizable()修改器或设置固定帧

var images: [UIImage]! = [UIImage(named: "pushup001")!, UIImage(named: "pushup002")!]

let animatedImage = UIImage.animatedImage(with: images, duration: 0.5)

struct workoutAnimation: UIViewRepresentable {

    func makeUIView(context: Self.Context) -> UIImageView {
        return UIImageView(image: animatedImage)
    }

    func updateUIView(_ uiView: UIImageView, context: UIViewRepresentableContext<workoutAnimation>) {

    }
}


struct WorkoutView: View {
    var body: some View {
        VStack {
            workoutAnimation().aspectRatio(contentMode: .fit)
        }
    }
}

在方法 1 中我可以更改图像但不能设置动画，而在方法 2 中我可以设置动画但不能控制它的大小

Answer 1

我使用UIViewRepresentable协议解决了这个问题。这里我返回了一个UIView带有ImageView它的子视图的。这让我可以更好地控制孩子的尺寸等。

import SwiftUI


var images : [UIImage]! = [UIImage(named: "pushup001")!, UIImage(named: "pushup002")!]

let animatedImage = UIImage.animatedImage(with: images, duration: 0.5)

struct workoutAnimation: UIViewRepresentable {

    func makeUIView(context: Self.Context) -> UIView {
        let someView = UIView(frame: CGRect(x: 0, y: 0, width: 400, height: 400))
        let someImage = UIImageView(frame: CGRect(x: 20, y: 100, width: 360, height: 180))
        someImage.clipsToBounds = true
        someImage.layer.cornerRadius = 20
        someImage.autoresizesSubviews = true
        someImage.contentMode = UIView.ContentMode.scaleAspectFill
        someImage.image = animatedImage
        someView.addSubview(someImage)
        return someView
    }

    func updateUIView(_ uiView: UIView, context: UIViewRepresentableContext<workoutAnimation>) {

    }
}


struct WorkoutView: View {
    var body: some View {
        VStack (alignment: HorizontalAlignment.center, spacing: 10) {
            workoutAnimation()
            Text("zzzz")
        }
    }
}

Answer 2

如果你想要一个健壮的跨平台 SwiftUI 实现动画图像，比如 GIF/APNG/WebP，我建议使用SDWebImageSwiftUI。该框架基于现有的成功图片加载框架SDWebImage并提供了 SwiftUI 绑定。

要播放动画，请使用AnimatedImage视图。

var body: some View {
    Group {
        // Network
        AnimatedImage(url: URL(string: "https://raw.githubusercontent.com/liyong03/YLGIFImage/master/YLGIFImageDemo/YLGIFImageDemo/joy.gif"))
        .onFailure(perform: { (error) in
            // Error
        })
    }
}