如何在iOS视图中设置GIF/视频背景？GIF背景加载延迟求助

First, let's address the delay issue in your current code, then cover both GIF and video background implementations properly.

Why Your Current Code Has Delay #

Your code uses NSData(contentsOfFile:) which is a synchronous file read—even inside DispatchQueue.main.async, this blocks the main thread while the file loads, causing the delay. Plus, UIWebView is deprecated (since iOS 12), so it's not the best choice anymore.

Improved GIF Background Implementation (No Web View) #

Using UIImageView to display animated GIFs is more efficient and avoids web view overhead. Here's how to do it:

First, add an extension to UIImage to load GIF frames:

extension UIImage {
    static func animatedImage(fromGIFNamed name: String) -> UIImage? {
        guard let url = Bundle.main.url(forResource: name, withExtension: "gif") else { return nil }
        guard let data = try? Data(contentsOf: url) else { return nil }
        
        let source = CGImageSourceCreateWithData(data as CFData, nil)
        let count = CGImageSourceGetCount(source!)
        var images = [UIImage]()
        
        for i in 0..<count {
            guard let cgImage = CGImageSourceCreateImageAtIndex(source!, i, nil) else { continue }
            let image = UIImage(cgImage: cgImage)
            images.append(image)
        }
        
        return UIImage.animatedImage(with: images, duration: Double(count) / 15.0) // Adjust duration to match your GIF's speed
    }
}

Then, in your viewDidLoad:

override func viewDidLoad() {
    super.viewDidLoad()
    
    if let gifImage = UIImage.animatedImage(fromGIFNamed: "4") {
        let gifBackgroundView = UIImageView(frame: view.bounds)
        gifBackgroundView.image = gifImage
        gifBackgroundView.contentMode = .scaleAspectFill
        gifBackgroundView.clipsToBounds = true
        view.insertSubview(gifBackgroundView, at: 0) // Send to back so other UI elements stay on top
    }
}

This method uses native UI components and avoids unnecessary web view overhead, leading to smoother loading and playback.

Alternative: Using WKWebView (If You Prefer Web View Approach) #

If you still want to use a web view, switch to WKWebView and load the file asynchronously to fix the delay:

override func viewDidLoad() {
    super.viewDidLoad()
    
    DispatchQueue.global(qos: .background).async {
        guard let filePath = Bundle.main.path(forResource: "4", ofType: "gif"),
              let gifData = try? Data(contentsOf: URL(fileURLWithPath: filePath)) else { return }
        
        DispatchQueue.main.async {
            let webViewBG = WKWebView(frame: self.view.bounds)
            webViewBG.load(gifData, mimeType: "image/gif", characterEncodingName: "utf-8", baseURL: URL(fileURLWithPath: ""))
            webViewBG.isUserInteractionEnabled = false // Disable interaction since it's a background
            webViewBG.contentMode = .scaleAspectFill
            self.view.insertSubview(webViewBG, at: 0)
        }
    }
}

Reading the file in a background queue prevents blocking the main thread, eliminating the loading delay.

Setting a Video as Background #

For a seamless video background, use AVPlayer and AVPlayerLayer to loop a muted video:

First, import AVFoundation:

import AVFoundation

Then, add this code to your view controller:

private var player: AVPlayer?

override func viewDidLoad() {
    super.viewDidLoad()
    setupVideoBackground()
}

private func setupVideoBackground() {
    guard let videoURL = Bundle.main.url(forResource: "background-video", withExtension: "mp4") else { return }
    
    player = AVPlayer(url: videoURL)
    player?.isMuted = true // Mute the video for background use
    player?.actionAtItemEnd = .none // Prevent stopping at the end of the video
    
    let playerLayer = AVPlayerLayer(player: player)
    playerLayer.frame = view.bounds
    playerLayer.videoGravity = .resizeAspectFill // Scale to fill the view without distortion
    view.layer.insertSublayer(playerLayer, at: 0)
    
    // Set up loop behavior
    NotificationCenter.default.addObserver(self, selector: #selector(restartVideo), name: .AVPlayerItemDidPlayToEndTime, object: player?.currentItem)
    
    player?.play()
}

@objc private func restartVideo() {
    player?.seek(to: .zero)
    player?.play()
}

// Clean up the observer when the view is deallocated
deinit {
    NotificationCenter.default.removeObserver(self)
}

This will play a muted, looped video as your view's background. Make sure to optimize your video file (small size, appropriate resolution) to avoid performance issues.

Key Tips for Smooth Backgrounds #

• Optimize assets: Compress GIFs/videos to reduce file size—large files cause loading delays and increased memory usage.
• Load asynchronously: Always avoid blocking the main thread when loading media files.
• Send to back: Use insertSubview(_:at:0) or layer.insertSublayer(_:at:0) to ensure other UI elements are visible above the background.

内容的提问来源于stack exchange，提问作者Andres Gomez