突然发现SwiftUI的Image貌似不支持播放GIF，那就只能自己尝试实现一把。
Demo：Github地址
实现方案
1. SwiftUI中使用UIKit - UIViewRepresentable
SwiftUI的Image和AsyncImage目前发现并不支持播放GIF，既然如此，最简单的实现就是将UIKit的UIImageView应用到SwiftUI中。
在SwiftUI中使用UIKit控件，就得用到UIViewRepresentable协议去实现了：
import SwiftUI
import UIKit
struct GifImage: UIViewRepresentable {
// GIF模型
var resource: GifResource?
// UIKit的内容显示模式
var contentMode: UIView.ContentMode = .scaleAspectFill
// 用于控制GIF的播放/暂停
@Binding var isAnimating: Bool
func makeUIView(context: Context) -> MyView { MyView() }
func updateUIView(_ uiView: MyView, context: Context) {
uiView.contentMode = contentMode
uiView.updateGifResource(resource, isAnimating)
}
......
}
-
GifResource是提供GIF的图片、时长的模型类； -
func makeUIView(context: Context) -> MyView和func updateUIView(_ uiView: MyView, context: Context)是UIViewRepresentable协议必须实现的两个函数，前者是创建你想用的UIView，后者是用来刷新该UIView，系统自己会调用，例如给resource属性赋值就会调起，所以我们应该在这个函数中设置内容。
其中MyView是我自己自定义的一个UIView，上面放着一个UIImageView专门播放GIF：
class MyView: UIView {
private let imageView = UIImageView()
private var resource: GifResource?
init() {
super.init(frame: .zero)
clipsToBounds = true
imageView.translatesAutoresizingMaskIntoConstraints = false
addSubview(imageView)
NSLayoutConstraint.activate([
imageView.widthAnchor.constraint(equalTo: widthAnchor),
imageView.heightAnchor.constraint(equalTo: heightAnchor),
])
}
required init?(coder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
override var contentMode: UIView.ContentMode {
set { imageView.contentMode = newValue }
get { imageView.contentMode }
}
......
}
- 为什么不直接使用
UIImageView？如果直接使用UIImageView，整个视图的尺寸在SwiftUI将不受控制（图片多大视图就多大），这个目前我也不知道为什么，但神奇的是在其上面放入UIImageView并添加约束即可限制大小。 - 其实这里使用第三方的GIF加载方式（
SDWebImage、KingFisher）应该会更好，本文只是介绍实现方案，所以用最简单的方式实现。
2. 解码GIF文件
GIF的解码过程我写在了UIImage的分类中，并且使用了async/await适配SwiftUI，方便调起：
import UIKit
extension UIImage {
static func decodeGif(fromBundle name: String) async throws -> GifResource {
......
}
static func decodeGif(withUrl url: URL?) async throws -> GifResource {
......
}
static func decodeGif(withData data: Data) async throws -> GifResource {
......
}
}
- 具体实现可以查看Demo，都是参考
YYKit的做法然后“翻译”成Swift语言（Maybe会有问题，目前还没发现任何问题，凑合着用）。
3. 用起来
struct ContentView: View {
@State var resource: GifResource? = nil
var body: some View {
VStack {
GifImage(resource: resource,
contentMode: .scaleAspectFit,
isAnimating: .constant(true))
.frame(width: 150, height: 150)
.background(.ultraThinMaterial)
.mask(RoundedRectangle(cornerRadius: 10, style: .continuous))
.shadow(color: .black.opacity(0.3), radius: 10, x: 0, y: 10)
}
.task {
resource = try? await UIImage.decodeGif(fromBundle: "Cat2")
}
}
}
4. AsyncGifImage - 异步加载远程/本地GIF
基于GifImage的扩展，一个可异步加载远程/本地GIF的View：
/// 仿照`AsyncImage`
AsyncGifImage(url: url,
contentMode: .scaleAspectFit,
transaction: Transaction(animation: .easeInOut),
isAnimating: $isAnimating,
isReLoad: $isReload) { phase in
switch phase {
// 请求中
case .loading: ProgressView()
// 请求成功
case let .success(image): image // image为GifImage
// 请求失败
case .failure: Text("Failure").font(.body.weight(.bold))
}
}
- 让使用者根据
phase返回不同状态，自定义去提供不同时期的View； -
transaction：根据phase切换不同的View的过渡效果； -
isAnimating：控制GIF的播放/暂停； -
isReload：重载GIF。
最终效果
effect.gif
OK, done.
Demo：Github地址
