【SwiftUI】CGAnimateImageDataWithBlockやCGAnimateImageAtURLWithBlockを使ってGIFを表示する

はじめに

数日前に「【SwiftUI】GIFを表示したい」という記事を書きました。

コメント欄でもっといい表示方法を教わったので試してみました。

サンプルアプリ

今回使用するGIF

SuperGSATBによるPixabayのGIF

実装

struct GIFView: View {
    @State private var image: Image?
    var gifData: CFData?
    var gifURL: CFURL?
    
    init(asset: NSDataAsset) {
        self.gifData = asset.data as CFData
        self.gifURL = nil
    }
    
    init(url: URL) {
        self.gifData = nil
        self.gifURL = url as CFURL
    }
    
    var body: some View {
        Group {
            if let image {
                image
                    .resizable()
                    .scaledToFit()
            } else {
                Text("読み込み失敗")
            }
        }
        .onAppear {
            if let gifData {
                CGAnimateImageDataWithBlock(gifData, nil) { index, cgImage, stop in
                    self.image = Image(uiImage: .init(cgImage: cgImage))
                }
            }
            if let gifURL {
                CGAnimateImageAtURLWithBlock(gifURL, nil) { index, cgImage, stop in
                    self.image = Image(uiImage: .init(cgImage: cgImage))
                }
            }
        }
    }
}

GIFの読み込み

GIFの読み込み方が2種類あります。

パターン1

Assetsの中にGIFを追加する方法です。

パターン2

プロジェクトのディレクトリ内に追加する方法です。

実装

import SwiftUI

struct ContentView: View {
    var body: some View {
        VStack {
            // パターン1
            GIFView(asset: NSDataAsset(name: "heart")!)
                .frame(width: 300, height: 300)
            
            // パターン2
            GIFView(url: Bundle.main.url(forResource: "heart", withExtension: "gif")!)
                .frame(width: 300, height: 300)
        }
    }
}

おわり

こんな機能があったなんて知りませんでした。
めっちゃ便利ですね！！

@Yajiro さんに感謝です！

参考記事

公式ドキュメント